Skip to content
GitLab
Commit 8ca70bd8 authored by Mark Otto's avatar Mark Otto
Browse files

Overhaul modal to make it responsive and not super lame

parent 0b466836
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 288 additions and 76 deletions
+288 -76
docs/assets/css/bootstrap.css
+ 56
- 34
View file @ 8ca70bd8
...@@ -3720,34 +3720,35 @@ button.close { ...@@ -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; display: none;
} overflow: auto;
overflow-y: scroll;
.modal-backdrop.fade { -webkit-overflow-scrolling: touch;
opacity: 0;
} }
.modal-backdrop, .modal-dialog {
.modal-backdrop.fade.in { position: relative;
opacity: 0.8; top: 0;
filter: alpha(opacity=80); right: 0;
left: 0;
z-index: 1050;
width: auto;
padding: 10px;
} }
.modal { .modal-content {
position: fixed; position: relative;
top: 10%;
left: 50%;
z-index: 1050;
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, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
...@@ -3760,7 +3761,7 @@ button.close { ...@@ -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 { ...@@ -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 { ...@@ -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;
......
docs/assets/js/bootstrap-modal.js
+ 5
- 1
View file @ 8ca70bd8
...@@ -239,6 +239,10 @@ ...@@ -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);
docs/assets/js/bootstrap.js
+ 5
- 1
View file @ 8ca70bd8
...@@ -1037,7 +1037,11 @@ ...@@ -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);
/* =========================================================== /* ===========================================================
......
docs/assets/js/bootstrap.min.js
+ 1
- 1
View file @ 8ca70bd8
This diff is collapsed.
docs/gallery.html
+ 1
- 1
View file @ 8ca70bd8
...@@ -219,7 +219,7 @@ ...@@ -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>
......
js/bootstrap-modal.js
+ 5
- 1
View file @ 8ca70bd8
...@@ -239,6 +239,10 @@ ...@@ -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);
less/modals.less
+ 80
- 37
View file @ 8ca70bd8
...@@ -2,33 +2,44 @@ ...@@ -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 @@ ...@@ -43,40 +54,58 @@
top: -25%; top: -25%;
} }
&.fade.in { top: 10%; } &.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 { .modal-header {
padding: 9px 15px; padding: 9px 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #e5e5e5;
// Close icon }
.close { margin-top: 2px; } // Close icon
// Heading .modal-header .close {
h3 { margin-top: 2px;
margin: 0; }
line-height: 30px;
} // Title text within header
.modal-title {
margin: 0;
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 { .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 @@ ...@@ -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;
}
}
less/tests/new-modal.html 0 → 100644
+ 135
- 0
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>
Supports Markdown
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