Question

我有这个twitter bootbox模式，它出现在屏幕上，默认的边距类型为：

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

我有这个jquery代码，我踢它来调整默认的上边距，所以它没有＆＃t;＃34;浮动＆＃34;到目前为止：

        $("#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 def在这里：

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

Answer 1

通过动态使用高度找到了更好的方法：

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


        });

Twitter引导模式框，边距在不同的开发框上表现不同

1 个答案: