Set modal layer to the center fo the viewed screen

Question

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%;
}

score 15 · Accepted Answer · edited May 23 '17 at 12:14

15

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 );
                }
            });

edited May 23 '17 at 12:14

Community

1
1

answered Feb 06 '13 at 22:10

steve

430
5
7

That helps indeed but now the modal shoots all the way down out of the document on the non-mobile site for me. – mbrochh Jul 25 '13 at 12:23
see the answer i given just now, i have maintained from css only – Innodel Dec 22 '14 at 04:41
I think it should be "plus" instead of "minus"? Cuz in my situation, "minus" put the modal out of screen. And I also change "margin-top" to "top". – Zeyu Wang Nov 28 '19 at 15:06

score 4 · Answer 2 · edited May 23 '17 at 12:22

The solution from @steve did not work for me despite my issue being identical to @Stephanie.

Restating the problem that Stephanie and I share:

I have long bootstrap modals. On small screens the modals cannot be seen in their entirety without scrolling. By default in bootstrap modals are position:fixed. I can allow them to be scrolled by changing this to position:absolute.

But now I have a new problem. My pages are long too, and when I fire the modal from the bottom of the page the modal is appearing at the top of the page, out of the current browser view.

So to fix both of these:

css:

// allows the modal to be scrolled
.modal {position: absolute;}

javascript/jQuery:

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  $('body').scrollTop(0);
});

But it turns out that Firefox does not like 'body' as a selector for scrollTop, but does like 'html'. Webkit operates conversely. Using a comment from here: Animate scrollTop not working in firefox

Since I am using jQuery < 1.9 I can do browser sniffing to solve this:

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  // Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});

Now when the modals are fired they appear at the top of the page, the browser window scrolls up to expose them, but the user can still scroll down if their screen is too small to display the entire length of the modal.

I know I'm late to the party but this is really THE correct solution for the stated issue. Thank you for that. — max7, Aug 19 '14 at 19:00

score 2 · Answer 3 · answered Oct 18 '12 at 07:12

2

Use position "fixed" not "absolute".

More details here http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

answered Oct 18 '12 at 07:12

tomaszbak

8,247
4
44
37

2

Read what I wrote: "...but I had to change their position to absolute, be cause I need them to be able to scroll..." – Stefanie Oct 18 '12 at 11:25
Did you ever find a solution to this stefanie? I'm in the same boat. – TerryB Dec 04 '12 at 00:48
-1 default in bootstrap is "fixed". OP is looking to overcome issues with "fixed". – AllInOne Oct 09 '13 at 14:35

score 1 · Answer 4 · answered Nov 14 '13 at 15:59

A bit late to the game but this is the fix I currently have in place and works on Firefox, Chrome and IE.

$('body').on('show', '.modal', function () {
$(this).css({ 'margin-top': window.pageYOffset - $(this).height() / 2, 'top': '50%' });
$(this).css({ 'margin-left': window.pageXOffset - $(this).width() / 2, 'left': '50%' });
});

score 0 · Answer 5 · answered Nov 14 '13 at 14:41

Had to change to absolute positioning also so it would scroll on mobiles.

This worked for me as well (solution by AllInOne):

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  // Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});

score 0 · Answer 6 · answered Aug 13 '14 at 08:44

0

The problem is CSS - your "body" & "HTML" tags are set to "height: 100%"

answered Aug 13 '14 at 08:44

Aro Hostmaster

1

Set modal layer to the center fo the viewed screen

6 Answers6