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 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 时不一样）

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 回答