mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 21:22:52 +02:00
Code Issues Releases Wiki Activity

finish modal tweaks

Browse Source
This commit is contained in:
Mark Otto
2013-02-07 19:31:12 -08:00
parent a623b8c10f
commit b04acb37e8
5 changed files with 38 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/assets/css/bootstrap.css vendored
View File

@@ -3745,6 +3745,10 @@ button.close {
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
top: 0;
}
.modal-dialog {
position: relative;
top: 0;
@@ -3762,25 +3766,13 @@ button.close {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal-content.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal-content.fade.in {
top: 10%;
}
.modal-backdrop {
position: fixed;
top: 0;
@@ -3788,17 +3780,16 @@ button.close {
bottom: 0;
left: 0;
z-index: 1030;
background-color: #fff;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.75;
filter: alpha(opacity=75);
opacity: 0.5;
filter: alpha(opacity=50);
}
.modal-header {
@@ -3817,11 +3808,11 @@ button.close {
.modal-body {
position: relative;
padding: 15px;
padding: 20px;
}
.modal-footer {
padding: 14px 15px 15px;
padding: 19px 20px 20px;
margin-top: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
@@ -3859,6 +3850,10 @@ button.close {
padding-bottom: 30px;
margin-left: -280px;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
.tooltip {

3
docs/javascript.html
View File

@@ -242,7 +242,7 @@ $('#myModal').on('show', function (e) {
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
@@ -253,7 +253,6 @@ $('#myModal').on('show', function (e) {
<hr>
<h4>Overflowing text to show optional scrollbar</h4>
<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

3
docs/templates/pages/javascript.mustache vendored
View File

@@ -175,7 +175,7 @@ $('#myModal').on('show', function (e) {
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
@@ -186,7 +186,6 @@ $('#myModal').on('show', function (e) {
<hr>
<h4>Overflowing text to show optional scrollbar</h4>
<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>