I'm using Twitter Bootstrap's modal, but I had to change their position to absolute, be cause I need them to be able to scroll cause of the small screens. Sadly, with this, the modals open to a fixed position of the site and not on the viewed area. Is there any way to open them (and be able to be scrolled) to the screen what I'm currently viewing?
CSS:
.modal {
width: 845px;
margin: -250px 0 0 -430px;
background-color: #f6f5ed;
position: absolute;
border: 1px solid #cdc4b2;
top: 50%;
left: 50%;
}
In this example first, use the find() method to find out the modal dialog. Then subtract the modal height from the window height and divide that into half and will place the modal that will be the centered(vertically). This solution will dynamically adjust the alignment of the modal.
You can vertically center a modal by passing the centered prop.
Answer: Use the CSS margin-top Property This solution will dynamically adjust the alignment of the modal and always keep it in the center of the page even if the user resizes the browser window.
This thread: Modal plugin of Bootstrap 2 is not displayed by the center has the correct answer, posted here as well:
$('#YourModal').modal().css(
{
'margin-top': function () {
return window.pageYOffset-($(this).height() / 2 );
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With