Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set modal layer to the center fo the viewed screen

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?

Picture of my problem

CSS:

.modal {
    width: 845px;
    margin: -250px 0 0 -430px;
    background-color: #f6f5ed;
    position: absolute;
    border: 1px solid #cdc4b2;
    top: 50%;
    left: 50%;
}
like image 507
Stefanie Avatar asked Oct 17 '12 09:10

Stefanie


People also ask

How do you center a modal on a screen?

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.

How do I center a modal in bootstrap react?

You can vertically center a modal by passing the centered prop.

How do you align a modal?

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.


1 Answers

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 );
                }
            });
like image 82
steve Avatar answered Nov 05 '22 01:11

steve