Skip to content

B
bootstrap
Commit 8ca70bd8 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Overhaul modal to make it responsive and not super lame

parent 0b466836
Expand all Show whitespace changes
Inline Side-by-side
Showing with 288 additions and 76 deletions
docs/assets/css/bootstrap.css
View file @ 8ca70bd8
......@@ -3720,34 +3720,35 @@ button.close {
background-color: #fff;
}
.modal-backdrop {
.modal-open {
overflow: hidden;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
display: none;
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
.modal-dialog {
position: relative;
top: 0;
right: 0;
left: 0;
z-index: 1050;
width: auto;
padding: 10px;
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
display: none;
width: 560px;
margin-left: -280px;
.modal-content {
position: relative;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
......@@ -3760,7 +3761,7 @@ button.close {
background-clip: padding-box;
}
.modal.fade {
.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;
......@@ -3768,44 +3769,54 @@ button.close {
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
.modal-content.fade.in {
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 {
padding: 9px 15px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
.modal-title {
margin: 0;
line-height: 30px;
}
.modal-body {
position: relative;
max-height: 400px;
padding: 15px;
overflow-y: auto;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
margin-top: 15px;
text-align: right;
background-color: #f5f5f5;
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;
border-top: 1px solid #e5e5e5;
}
.modal-footer:before,
......@@ -3831,6 +3842,17 @@ button.close {
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 {
position: absolute;
z-index: 1030;
......
docs/assets/js/bootstrap-modal.js
View file @ 8ca70bd8
......@@ -241,4 +241,8 @@
})
})
var $body = $('body')
.on('shown', '.modal', function () { $body.addClass('modal-open') })
.on('hidden', '.modal', function () { $body.removeClass('modal-open') })
}(window.jQuery);
docs/assets/js/bootstrap.js
View file @ 8ca70bd8
......@@ -1039,6 +1039,10 @@
})
})
var $body = $('body')
.on('shown', '.modal', function () { $body.addClass('modal-open') })
.on('hidden', '.modal', function () { $body.removeClass('modal-open') })
}(window.jQuery);
/* ===========================================================
* bootstrap-tooltip.js v3.0.0
......
docs/assets/js/bootstrap.min.js
View file @ 8ca70bd8
This diff is collapsed.
docs/gallery.html
View file @ 8ca70bd8
......@@ -219,7 +219,7 @@
<li class="muted">&middot;</li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></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>
</div>
</footer>
......
js/bootstrap-modal.js
View file @ 8ca70bd8
......@@ -241,4 +241,8 @@
})
})
var $body = $('body')
.on('shown', '.modal', function () { $body.addClass('modal-open') })
.on('hidden', '.modal', function () { $body.removeClass('modal-open') })
}(window.jQuery);
less/modals.less
View file @ 8ca70bd8
......@@ -2,33 +2,44 @@
// Modals
// --------------------------------------------------
// Background
.modal-backdrop {
// .modal-open - body class for killing the scroll
// .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;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: #000;
// Fade for backdrop
&.fade { opacity: 0; }
-webkit-overflow-scrolling: touch;
}
.modal-backdrop,
.modal-backdrop.fade.in {
.opacity(80);
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
top: 0;
left: 0;
right: 0;
width: auto;
padding: 10px;
z-index: @zindex-modal-background + 10;
}
// Base modal
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: @zindex-modal;
display: none;
width: 560px;
margin-left: -280px;
// Actual modal
.modal-content {
position: relative;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
......@@ -43,40 +54,58 @@
top: -25%;
}
&.fade.in { top: 10%; }
}
// 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 #eee;
// Close icon
.close { margin-top: 2px; }
// Heading
h3 {
border-bottom: 1px solid #e5e5e5;
}
// Close icon
.modal-header .close {
margin-top: 2px;
}
// Title text within header
.modal-title {
margin: 0;
line-height: 30px;
}
line-height: 30px; // effectively set a min-height for the header
}
// Body (where all modal content resides)
// Modal body
// -------------------------
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
// Remove bottom margin if need be
.modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
margin-top: 15px;
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right; // right align buttons
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-radius: 0 0 6px 6px;
.box-shadow(inset 0 1px 0 #fff);
border-top: 1px solid #e5e5e5;
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
......@@ -93,3 +122,17 @@
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;
}
}
less/tests/new-modal.html 0 → 100644
View file @ 8ca70bd8
<!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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment