Modal plugin of Bootstrap 2 is not displayed by the center

Question

I use bootstrap modal plugin. But modal dialog is not shown in center. Why? my mistake?

http://dl.dropbox.com/u/573972/stackoverflow/bootstrap/modal.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Mobile Specific-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS-->
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
</head>
<body>
  <div id="login" class="modal">
    <div class="modal-header">
      <h3>Login to Room fuga</h3>
    </div>
    <div class="modal-body">
      hogehoge
    </div>
  </div>
  <script src="bootstrap.min.js">
  </script>
  <script>
$('#login').modal();
</script>
</body>
</html>

score 18 · Accepted Answer · answered May 20 '12 at 14:05

18

I found this workarround to fix this issue:

$('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return -($(this).height() / 2);
                }
            })

Source: https://github.com/twitter/bootstrap/issues/374

answered May 20 '12 at 14:05

P48l0

212
1
2

I removed the minus before ($this) to add a positive top margin instead of a negative margin, and that centered my dialog vertically in bootstrap 3. Using the solution directly seemed to move my dialog outside the visible area. – angularsen Dec 09 '13 at 17:45
For my case using: -($(window).height() / 2) gave me better results – Wilson Freitas Feb 26 '14 at 22:51
see the answer i have given just now – Innodel Dec 22 '14 at 04:42

score 10 · Answer 2 · answered Sep 12 '12 at 08:02

10

if your twitter bootstrap modal dialog is not centered horizontally you can fix this via css.

just give the modal dialog a negative left margin that is half it's width like e.g. so:

 .modalDialogBlabla {
     margin: 0 0 0 -250px;
     width: 500px;
  }

answered Sep 12 '12 at 08:02

nerdess

10,051
10
45
55

2

Very clean and very nice solution! And although it doesn't answer the question (vertical centering), it DOES work like a charm for horizontal. – Petr Vostrel Jan 19 '13 at 15:24
awesome. Great time saver if you're not using the defaults. Thanks nerdess! – Hcabnettek Apr 28 '14 at 21:30

score 10 · Answer 3 · answered Dec 30 '12 at 17:51

10

Capture the show event of the .modal and then calculate the new position:

$('body').on('show', '.modal', function(){
  $(this).css({'margin-top':($(window).height()-$(this).height())/2,'top':'0'});
});

DEMO: http://jsfiddle.net/sonic1980/b2EHU/

answered Dec 30 '12 at 17:51

Peter

5,138
5
29
38

score 2 · Answer 4 · answered Feb 06 '13 at 22:21

2

Based on p4810's answer above but deal with where the user is on the screen too. Works with absolute positioning.

$('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });

answered Feb 06 '13 at 22:21

steve

430
5
7

Not working on IE9, Is there something IE doesn't understand about this? – Miguel Stevens Jan 29 '14 at 15:27

score -15 · Answer 5 · answered Apr 28 '12 at 12:42

-15

Did you try:

$( "#login" ).dialog({
    modal: true
});

Ref: http://jqueryui.com//demos/dialog/modal.html

answered Apr 28 '12 at 12:42

Osman

73
1
7

Is this way using jquery ui? I want to use bootstrap modal plugin. sorry. – cpw Apr 28 '12 at 13:06

Modal plugin of Bootstrap 2 is not displayed by the center

5 Answers5

Linked