Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 16, 2015 06:40
Show Gist options
  • Save anonymous/30ad5ab8442b90dddbf0 to your computer and use it in GitHub Desktop.
Save anonymous/30ad5ab8442b90dddbf0 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3 vertically centered modal and scroll fixes Bootstrap 3 vertically centered modal and scroll fixes // source http://jsbin.com/wixako
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 vertically centered modal and scroll fixes</title>
<meta name="description" content="Bootstrap 3 vertically centered modal and scroll fixes">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style id="jsbin-css">
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal modal-vcenter fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- include bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script id="jsbin-javascript">
/* center modal */
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $('.modal-vcenter:visible');
}
$modals.each( function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top);
});
}
$('.modal-vcenter').on('show.bs.modal', function(e) {
centerModals($(this));
});
$(window).on('resize', centerModals);
</script>
<script id="jsbin-source-css" type="text/css">/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/* center modal */
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $('.modal-vcenter:visible');
}
$modals.each( function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top);
});
}
$('.modal-vcenter').on('show.bs.modal', function(e) {
centerModals($(this));
});
$(window).on('resize', centerModals);</script></body>
</html>
Raw
jsbin.wixako.css
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}
Raw
jsbin.wixako.js
/* center modal */
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $('.modal-vcenter:visible');
}
$modals.each( function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top);
});
}
$('.modal-vcenter').on('show.bs.modal', function(e) {
centerModals($(this));
});
$(window).on('resize', centerModals);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment