11

ブートストラップモーダルプラグインを使用しています。ただし、モーダルダイアログは中央に表示されません。なんで？私の間違い？

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>
4

5 に答える 5

18

この問題を修正するためのこの回避策を見つけました：

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

ソース：https ：//github.com/twitter/bootstrap/issues/374

于 2012-05-20T14:05:40.393 に答える
10

Twitterのブートストラップモーダルダイアログが水平方向の中央に配置されていない場合は、cssを使用してこれを修正できます。

モーダルダイアログに、たとえば次のように幅の半分の負の左マージンを与えるだけです。

 .modalDialogBlabla {
     margin: 0 0 0 -250px;
     width: 500px;
  }
于 2012-09-12T08:02:57.203 に答える
10

showのイベントをキャプチャして.modalから、新しい位置を計算します。

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

デモ：http：//jsfiddle.net/sonic1980/b2EHU/

于 2012-12-30T17:51:03.077 に答える
2

上記のp4810の回答に基づいていますが、ユーザーが画面上のどこにいるかにも対処してください。絶対測位で動作します。

$('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });
于 2013-02-06T22:21:04.530 に答える
-15

試しましたか：

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

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

于 2012-04-28T12:42:32.560 に答える