Question

我使用bootstrap模式插件。但是模态对话框没有显示在中心。为什么？我的错误？

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>

Answer 1

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

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

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

Answer 2

如果你的twitter bootstrap模态对话框没有水平居中，你可以通过css解决这个问题。

只需给模态对话框一个负左边距，就像它的宽度的一半一样。这样：

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

Answer 3

捕获show的{{1}}事件，然后计算新位置：

.modal

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

Answer 4

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

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

Answer 5

你有没有尝试过：

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

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

中心不显示Bootstrap 2的模态插件

5 个答案: