rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Overhaul modal to make it responsive and not super lame

Browse Source
This commit is contained in:
Mark Otto 2013-02-06 02:07:40 -08:00
parent 0b4668368b
commit 8ca70bd83a
8 changed files with 294 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3720,34 +3720,35 @@ button.close {
background-color: #fff; background-color: #fff;
} }
.modal-backdrop { .modal-open {
overflow: hidden;
}
.modal {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1040; z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
display: none; display: none;
width: 560px; overflow: auto;
margin-left: -280px; overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.modal-dialog {
position: relative;
top: 0;
right: 0;
left: 0;
z-index: 1050;
width: auto;
padding: 10px;
}
.modal-content {
position: relative;
background-color: #fff; background-color: #fff;
border: 1px solid #999; border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
@ -3760,7 +3761,7 @@ button.close {
background-clip: padding-box; background-clip: padding-box;
} }
.modal.fade { .modal-content.fade {
top: -25%; top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out; -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out; -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
@ -3768,44 +3769,54 @@ button.close {
transition: opacity 0.3s linear, top 0.3s ease-out; transition: opacity 0.3s linear, top 0.3s ease-out;
} }
.modal.fade.in { .modal-content.fade.in {
top: 10%; top: 10%;
} }
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: #fff;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.75;
filter: alpha(opacity=75);
}
.modal-header { .modal-header {
padding: 9px 15px; padding: 9px 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #e5e5e5;
} }
.modal-header .close { .modal-header .close {
margin-top: 2px; margin-top: 2px;
} }
.modal-header h3 { .modal-title {
margin: 0; margin: 0;
line-height: 30px; line-height: 30px;
} }
.modal-body { .modal-body {
position: relative; position: relative;
max-height: 400px;
padding: 15px; padding: 15px;
overflow-y: auto;
}
.modal-form {
margin-bottom: 0;
} }
.modal-footer { .modal-footer {
padding: 14px 15px 15px; padding: 14px 15px 15px;
margin-bottom: 0; margin-top: 15px;
text-align: right; text-align: right;
background-color: #f5f5f5; border-top: 1px solid #e5e5e5;
border-top: 1px solid #ddd;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
} }
.modal-footer:before, .modal-footer:before,
@ -3831,6 +3842,17 @@ button.close {
margin-left: 0; margin-left: 0;
} }
@media screen and (min-width: 768px) {
.modal-dialog {
right: auto;
left: 50%;
width: 560px;
padding-top: 30px;
padding-bottom: 30px;
margin-left: -280px;
}
}
.tooltip { .tooltip {
position: absolute; position: absolute;
z-index: 1030; z-index: 1030;

6
docs/assets/js/bootstrap-modal.js vendored
View File

@ -239,6 +239,10 @@
.one('hide', function () { .one('hide', function () {
$this.focus() $this.focus()
}) })
}) })
var $body = $('body')
.on('shown', '.modal', function () { $body.addClass('modal-open') })
.on('hidden', '.modal', function () { $body.removeClass('modal-open') })
}(window.jQuery); }(window.jQuery);

6
docs/assets/js/bootstrap.js vendored
View File

@ -1037,7 +1037,11 @@
.one('hide', function () { .one('hide', function () {
$this.focus() $this.focus()
}) })
}) })
var $body = $('body')
.on('shown', '.modal', function () { $body.addClass('modal-open') })
.on('hidden', '.modal', function () { $body.removeClass('modal-open') })
}(window.jQuery); }(window.jQuery);
/* =========================================================== /* ===========================================================

2
docs/assets/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/gallery.html
View File

@ -219,7 +219,7 @@
<li class="muted">&middot;</li> <li class="muted">&middot;</li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li> <li class="muted">&middot;</li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li> <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">Changelog</a></li>
</ul> </ul>
</div> </div>
</footer> </footer>

6
js/bootstrap-modal.js vendored
View File

@ -239,6 +239,10 @@
.one('hide', function () { .one('hide', function () {
$this.focus() $this.focus()
}) })
}) })
var $body = $('body')
.on('shown', '.modal', function () { $body.addClass('modal-open') })
.on('hidden', '.modal', function () { $body.removeClass('modal-open') })
}(window.jQuery); }(window.jQuery);

123
less/modals.less
View File

@ -2,33 +2,44 @@
// Modals // Modals
// -------------------------------------------------- // --------------------------------------------------
// Background // .modal-open - body class for killing the scroll
.modal-backdrop { // .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @zindex-modal-background; z-index: @zindex-modal-background;
background-color: #000; -webkit-overflow-scrolling: touch;
// Fade for backdrop
&.fade { opacity: 0; }
} }
.modal-backdrop, // Shell div to position the modal with bottom padding
.modal-backdrop.fade.in { .modal-dialog {
.opacity(80); position: relative;
top: 0;
left: 0;
right: 0;
width: auto;
padding: 10px;
z-index: @zindex-modal-background + 10;
} }
// Base modal // Actual modal
.modal { .modal-content {
position: fixed; position: relative;
top: 10%;
left: 50%;
z-index: @zindex-modal;
display: none;
width: 560px;
margin-left: -280px;
background-color: #fff; background-color: #fff;
border: 1px solid #999; border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.3);
@ -43,40 +54,58 @@
top: -25%; top: -25%;
} }
&.fade.in { top: 10%; } &.fade.in { top: 10%; }
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
// Close icon
.close { margin-top: 2px; }
// Heading
h3 {
margin: 0;
line-height: 30px;
}
} }
// Body (where all modal content resides) // Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background - 10;
background-color: #fff;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop,
.modal-backdrop.fade.in {
.opacity(75);
}
// Modal header
// -------------------------
// Top section of the modal w/ title and dismiss
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #e5e5e5;
}
// Close icon
.modal-header .close {
margin-top: 2px;
}
// Title text within header
.modal-title {
margin: 0;
line-height: 30px; // effectively set a min-height for the header
}
// Modal body
// -------------------------
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body { .modal-body {
position: relative; position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px; padding: 15px;
} }
// Remove bottom margin if need be
.modal-form {
margin-bottom: 0;
}
// Footer (for actions) // Footer (for actions)
.modal-footer { .modal-footer {
margin-top: 15px;
padding: 14px 15px 15px; padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right; // right align buttons text-align: right; // right align buttons
background-color: #f5f5f5; border-top: 1px solid #e5e5e5;
border-top: 1px solid #ddd;
border-radius: 0 0 6px 6px;
.box-shadow(inset 0 1px 0 #fff);
.clearfix(); // clear it in case folks use .pull-* classes on buttons .clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons // Properly space out buttons
@ -93,3 +122,17 @@
margin-left: 0; margin-left: 0;
} }
} }
@media screen and (min-width: 768px) {
.modal-dialog {
left: 50%;
right: auto;
width: 560px;
margin-left: -280px;
padding-top: 30px;
padding-bottom: 30px;
}
}

135
less/tests/new-modal.html Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New modal demo · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body class="modal-open">
<!-- Navbar
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="../../docs/index.html">Bootstrap</a>
</div>
</div>
</div>
<div class="container">
<div class="modal" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-title">Modal title</h3>
</div>
<div class="modal-body">
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" href="#">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal-backdrop"></div>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
<script src="../../docs/assets/js/bootstrap-button.js"></script>
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
<script src="../../docs/assets/js/application.js"></script>
</body>
</html>