This is a two part question:
How can you position the modal vertically in the center when you don't know the exact height of the modal?
Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?
I have tried using this:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
This gives me the result I need when the content is much larger than vertical screen size, but for small modal contents it's pretty much unusable.
This question is related to
css
twitter-bootstrap
modal-dialog
center
.modal {
text-align: center;
}
@media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
And adjust a little bit .fade class to make sure it appears out of the top border of window, instead of center
1. How can you position the modal vertically in the center when you don't know the exact height of the modal?
To absolute center the Bootstrap 3 Modal without declaring a height, you will first need to overwrite the Bootstrap CSS by adding this to your style sheet:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
This will position the modal-dialogs top-left corner in the center of the window.
We have to add this media query or else the modal margin-left is wrong on small devices:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
Now we will need to adjust its position with JavaScript. To do that we give the element a negative top and left margin equal to half of its height and width. In this example we will be using jQuery since it is available with Bootstrap.
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
Adding on Finik's answer. Credits to Centering in the Unknown.
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Notice the negative margin-right? This removes the space added by inline-block. That space causes the modal to jump to the bottom of the page @media width < 768px.
2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?
This is possible by giving the modal-body an overflow-y:auto and a max-height. This takes a bit more work to get it working properly. Start with adding this to your style sheet:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
We will use jQuery again to get the window height and set the max-height of the modal-content first. Then we have to set the max-height of the modal-body, by subtracting the modal-content with the modal-header and modal-footer:
$('.modal').on('shown.bs.modal', function() {
var contentHeight = $(window).height() - 60;
var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;
$(this).find('.modal-content').css({
'max-height': function () {
return contentHeight;
}
});
$(this).find('.modal-body').css({
'max-height': function () {
return (contentHeight - (headerHeight + footerHeight));
}
});
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
You can find a working demo here with Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: I recommend using the updated version instead for a more responsive solution: http://cdpn.io/mKfCc
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
(Updated 30/11/2015 http://cdpn.io/mKfCc with above edit)
My solution
.modal-dialog-center {
margin-top: 25%;
}
<div id="waitForm" class="modal">
<div class="modal-dialog modal-dialog-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="headerBlock" class="modal-title"></h4>
</div>
<div class="modal-body">
<span id="bodyBlock"></span>
<br/>
<p style="text-align: center">
<img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
</p>
</div>
</div>
</div>
</div>
It can simply can be fixed with display: flex
.modal-dialog {
margin-top: 0;
margin-bottom: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.modal.fade .modal-dialog {
transform: translate(0, -100%);
}
.modal.in .modal-dialog {
transform: translate(0, 0);
}
With prefix
.modal-dialog {
margin-top: 0;
margin-bottom: 0;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
My solution:
.modal.in .modal-dialog
{
-webkit-transform: translate(0, calc(50vh - 50%));
-ms-transform: translate(0, 50vh) translate(0, -50%);
-o-transform: translate(0, calc(50vh - 50%));
transform: translate(0, 50vh) translate(0, -50%);
}
If you're okay with using flexbox then this should help solve it.
.modal-dialog {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.modal-content {
margin: 0 auto;
}
All what I did in my case is to set the Top in my css knowing the height of the modal
<div id="myModal" class="modal fade"> ... </div>
in my css i set
#myModal{
height: 400px;
top: calc(50% - 200px) !important;
}
Adding this simple css also works.
.modal-dialog {
height: 100vh !important;
display: flex;
}
.modal-content {
margin: auto !important;
height: fit-content !important;
}
There is an easiest way to do this using css:
.modal-dialog {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:500px;
height:300px;
}
That's it. Notice that it is only needed to be applied to the .modal-dialog container div.
Expanding on @Finik's excellent answer, this fix is only applied to non-mobile devices. I tested in IE8, Chrome, and Firefox 22 - it works with very long or short content.
.modal {
text-align: center;
}
@media screen and (min-device-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
The most universal solution I wrote. Dynamicaly computes with dialog height. (Next step could be recalculating of dialogs' height on window resize.)
JSfiddle: http://jsfiddle.net/8Fvg9/3/
// initialise on document ready
jQuery(document).ready(function ($) {
'use strict';
// CENTERED MODALS
// phase one - store every dialog's height
$('.modal').each(function () {
var t = $(this),
d = t.find('.modal-dialog'),
fadeClass = (t.is('.fade') ? 'fade' : '');
// render dialog
t.removeClass('fade')
.addClass('invisible')
.css('display', 'block');
// read and store dialog height
d.data('height', d.height());
// hide dialog again
t.css('display', '')
.removeClass('invisible')
.addClass(fadeClass);
});
// phase two - set margin-top on every dialog show
$('.modal').on('show.bs.modal', function () {
var t = $(this),
d = t.find('.modal-dialog'),
dh = d.data('height'),
w = $(window).width(),
h = $(window).height();
// if it is desktop & dialog is lower than viewport
// (set your own values)
if (w > 380 && (dh + 60) < h) {
d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
} else {
d.css('margin-top', '');
}
});
});
Found the perfect solution from here
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});
This is quite old and specifically asks for a solution using Bootstrap 3, but for anyone wondering: from Bootstrap 4 on there is a built-in solution called .modal-dialog-centered. Here's the issue: https://github.com/twbs/bootstrap/issues/23638
So using v4 you just need to add .modal-dialog-centered to .modal-dialog to vertically center the modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here's one other css only method that works pretty well and is based on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
sass:
.modal {
height: 100%;
.modal-dialog {
top: 50% !important;
margin-top:0;
margin-bottom:0;
}
//keep proper transitions on fade in
&.fade .modal-dialog {
transform: translateY(-100%) !important;
}
&.in .modal-dialog {
transform: translateY(-50%) !important;
}
}
This works for me:
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
$('#myModal').on('shown.bs.modal', function() {
var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
var userScreenHeight = $(document).outerHeight();
if (initModalHeight > userScreenHeight) {
$('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
} else {
$('#modal-dialog').css('margin-top',
(userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
}
});
i have downloaded bootstrap3-dialog from bellow link and modified the open function in bootstrap-dialog.js
https://github.com/nakupanda/bootstrap3-dialog
Code
open: function () {
!this.isRealized() && this.realize();
this.updateClosable();
//Custom To Vertically centering Bootstrap
var $mymodal = this.getModal();
$mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
$mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
//END
this.getModal().modal('show');
return this;
}
Css
.centerModal .modal-header{
text-align:left;
}
.centerModal .modal-body{
text-align:left;
}
Try something like this:
.popup__overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
text-align: center
}
.popup {
display: inline-block;
vertical-align: middle
}
yet another solution which will set a valid position for each visible modal on window.resize event and on show.bs.modal:
(function ($) {
"use strict";
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog"),
offset = ($(window).height() - $dialog.height()) / 2,
bottomMargin = parseInt($dialog.css('marginBottom'), 10);
// Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
if(offset < bottomMargin) offset = bottomMargin;
$dialog.css("margin-top", offset);
}
$(document).on('show.bs.modal', '.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
})(jQuery);
var modalVerticalCenterClass = ".modal";
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $(modalVerticalCenterClass + ':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);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
centerModals($(this));
});
$(window).on('resize', centerModals);
I know it's a bit late, but I am adding a new answer so that it doesn't get lost in the crowd. It's a cross-desktop-mobile-browser solution that works everywhere properly as it should.
It just needs the modal-dialog to be wrapped inside a modal-dialog-wrap class and need to have the following code additions:
.modal-dialog-wrap {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.modal-dialog {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.modal-content {
display: inline-block;
text-align: left;
}
The dialog starts centered and in cases of large content it simply grows vertically until a scrollbar appears.
Here is a working fiddle for your pleasure!
A simple way. Work for me. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/
<style>
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
</style>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
You might want to check out this collection of methods for absolute centering a div: http://codepen.io/shshaw/full/gEiDt
The simplest solution is to add modal dialog styles to the top of the page or import css with this code:
<style>
.modal-dialog {
position:absolute;
top:50% !important;
transform: translate(0, -50%) !important;
-ms-transform: translate(0, -50%) !important;
-webkit-transform: translate(0, -50%) !important;
margin:auto 50%;
width:40%;
height:40%;
}
</style>
Modal declaration:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Modal usage:
<a data-toggle="modal" data-target="#exampleModalCenter">
...
</a>
This is responsive code and also open with different size in mobile view please check once.
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 20%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal {_x000D_
}_x000D_
.vertical-alignment-helper {_x000D_
display:table;_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}_x000D_
.vertical-align-center {_x000D_
/* To center vertically */_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}_x000D_
.modal-content {_x000D_
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */_x000D_
width:inherit;_x000D_
height:inherit;_x000D_
/* To center horizontally */_x000D_
margin: 0 auto;_x000D_
}<head>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>_x000D_
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<!-- Button trigger modal -->_x000D_
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>_x000D_
<!-- Modal -->_x000D_
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">_x000D_
<div class="vertical-alignment-helper">_x000D_
<div class="modal-dialog vertical-align-center">_x000D_
<div class="modal-content">_x000D_
<div class="modal-header">_x000D_
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>_x000D_
_x000D_
</button>_x000D_
<h4 class="modal-title" id="myModalLabel">Modal title</h4>_x000D_
_x000D_
</div>_x000D_
<div class="modal-body">...</div>_x000D_
<div class="modal-footer">_x000D_
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>_x000D_
<button type="button" class="btn btn-primary">Save changes</button>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</body>CSS:
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
HTML:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
Reference: http://jsfiddle.net/rensdenobel/sRmLV/13/
Use this simple script that centers the modals.
If you want you can set a custom class (ex: .modal.modal-vcenter instead of .modal) to limit the functionality only to some modals.
var modalVerticalCenterClass = ".modal";
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $(modalVerticalCenterClass + ':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);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
centerModals($(this));
});
$(window).on('resize', centerModals);
Also add this CSS fix for the modal's horizontal spacing; we show the scroll on the modals, the body scrolls is hidden automatically by Bootstrap:
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
In mobile plantform it might look a little different, here's my code.
<div class="modal-container">
<style>
.modal-dialog{
margin-top: 60%;
width:80%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 100%
}
@media screen and (orientation:landscape){
.modal-dialog{
margin-top: 70;
width:80%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 100%
}
}
.modal-body{
text-align: center;
}
.modal-body p{
margin:14px 0px;
font-size: 110%;
}
.modal-content{
border-radius: 10px;
}
.modal-footer{
padding:0px;
}
.modal-footer a{
padding: 15px;
}
.modal-footer a:nth-child(1){
border-radius: 0px 0px 0px 10px;
}
.modal-footer a:nth-child(2){
border-radius: 0px 0px 10px 0px;
}
</style>
<h2>Basic Modal Example</h2>
<div data-toggle="modal" data-target="#myModal">Div for modal</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>???????????</p>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default" data-dismiss="modal">??</a>
<a href="#" class="btn btn-default" data-dismiss="modal">??</a>
</div>
</div>
</div>
</div>
</div>
</div>
set modal center to screen
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Very very easy way to achieve this concept and you will get modal always in the moddle of your screen by css as fllow : http://jsfiddle.net/jy0zc2jc/1/
you have to just modal class display as table by following css:
display:table
and modal-dialog as display:table-cell
see full working example in given fiddle
For the centering, I don't get what's with the overly complicated solutions. bootstrap already centers it horizontally for you, so you don't need to mess with this. My solution is just set a top margin only using jQuery.
$('#myModal').on('loaded.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
}
});
});
I've used the loaded.bs.modal event as I am remotely loading content, and using the shown.ba.modal event causes the height calculation to be incorrect. You can of course add in an event for the window being resized if you need it to be that responsive.
it's not that complicated.
please try this:
$(document).ready(function(){
var modalId = "#myModal";
resize: function(){
var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
$(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
}
$(window).resize(function(){
resize();
});
$(modalId).on('shown.bs.modal', function(){
resize();
});
});
Consider using the bootstrap-modal plugin found here - https://github.com/jschr/bootstrap-modal
The plugin will center all of your modals
Source: Stackoverflow.com