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

Answer 1

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

Answer 2

Did you try:

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

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

Answer 3

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/

Answer 4

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

Answer 5

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