0

デフォルトの余白タイプで画面に表示されるこの Twitter ブートボックス モーダルがあります。

http://twitter.github.com/bootstrap/javascript.html#modals

これまでのところ「浮き」ないように、デフォルトの上マージンを調整するためにキックするこのjqueryコードがあります。

        $("#myModal").modal({ // wire up the actual modal functionality and show the dialog
            "backdrop": "static",
            "keyboard": true,
            "show": false // ensure the modal is not shown immediately
        }).css({
                    'width': function () {
                        return ($(document).width() * .95) + 'px';
                        //return $(document).width() + 'px';
                    },
                    'margin-left': function () {
                        return -($(this).width() / 2);
                    }
                    ,'margin-top': function () {
                        return -$(this).height() * 1.20;
                    }
                });

HTML定義はここにあります：

  <div id="myModal"
     class="modal hide fade"
     tabindex="-1"
     role="dialog"
     aria-labelledby="label1"
     aria-hidden="true"
     data-backdrop="static"
     data-keyboard="false"
     data-show="false">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="label1">Label</h3>
  </div>

  <div class="modal-body" style="max-height: 580px;">
    <table id="main_table" class="table table-striped">
      <tr>          
        <th width="">Reserved By</th>
      </tr>

    </table>
    <div class="navbar">
      <div class="navbar-inner">
        <a style="width: 93%;" class="brand pull-left toggle_drop_down" href="#" data-toggle="collapse" data-target="#emp-list">
          Click here to search for employees not in your list
        </a>
        <button type="button" class="btn pull-right down_chevron" data-toggle="collapse" data-target="#emp-list">
          <i class="icon-chevron-down icon-black"></i>
        </button>
        <button type="button" class="btn pull-right up_chevron" data-toggle="collapse" data-target="#emp-list" style="display:none;">
          <i class="icon-chevron-up icon-black"></i>
        </button>
      </div>
    </div>
    <div id="emp-list" class="collapse out">

      <table cellpadding="0" cellspacing="0" border="0"
             id="employee_list"
             class="display table table-striped"
             data-source="<%= home_url(format: "json") %>">
        <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
  <!--<div class="modal-footer">-->
  <!--<a href="#" class="btn primary">Close</a></div>-->
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

このコードのビットは私のマシンでは見栄えがしますが、開発サーバーまたは他のユーザーボックスに展開すると、まったく機能しません...遠くに浮かんでいないようです。なぜ違うのかわかりませんが、他の開発者のマシンは同じwindows/chrome/rubymine/railsサーバーとrailsバージョンを実行しています。私はここでストローをつかんで、食い違いがある理由を発見しようとしています.

（私たちが展開する開発サーバーもLinuxボックスですが、それでもChromeでヒットすると、localhost：3000にヒットしたときと同じに見えません）

4

1 に答える 1

0

高さを動的に使用して、より良い方法を見つけました：

       $("#myModal .modal-body").css({
                'max-height':function () {
                    var h =  $(window).height()-250;
                    //alert(h); let me know what the windows are reporting
                    return (h);
                }


        });
于 2013-02-22T22:51:36.803 に答える