中心不显示Bootstrap 2的Modal插件

我使用bootstrap模态插件。但modal dialog未显示在中心。为什么？我的错？

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

   test            Login to Room fuga
 
  hogehoge 
 
    $('#login').modal();

我找到了解决此问题的方法：

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

资料来源： https ： //github.com/twitter/bootstrap/issues/374

如果你的twitter bootstrapmodal dialog没有水平居中，你可以通过css解决这个问题。

只需给modal dialog一个负左边距，就像它的宽度一样，例如：

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

捕获.modal的show事件，然后计算新位置：

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

演示： http ： //jsfiddle.net/sonic1980/b2EHU/

基于p4810的上述答案，但也要处理用户在屏幕上的位置。适用于绝对定位。

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

你试过了吗：

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

参考： http ： //jqueryui.com//demos/dialog/modal.html