0

我有以下用于模态的 HTML。当 seach-result-view 动态填充来自数据库的内容（使用 ajax）时，它会离开页面。即 seach-result-view 中的内容离开页面并变得不可滚动。我期待 Search-Result_div 可以滚动，因为它在另一个 div (#Search_result) 内。

 <div id="search_result" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Search results</h3>
    </div>
    <div id="seach-result-view" class="modal-body">
    </div>

CSS如下。

.modal {
 position: fixed;
 top: 10%;
 left: 40%;
 width:780px;
 z-index: 1050;
 margin-left: -280px;
 background-color: #ffffff;
 border: 1px solid #999;
 border: 1px solid rgba(0, 0, 0, 0.3);
 *border: 1px solid #999;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
      border-radius: 6px;
 outline: none;
 -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
      background-clip: padding-box;
}

.modal-body {
 position: relative;
 max-height: 80%;
 padding: 15px;
 overflow-y: auto;  
}

我在这里做错了什么？感谢任何帮助:)

4

1 回答 1

1

按照官方文档的建议实施模态。里面的modal-body div创造另div说<div id='results'>。

<div class='modal-body'>
  <div id='results'>
  </div>
</div>

在这个内部 div 中填充你的结果并添加这个 css：

div#results 
{
 width:150px;
 height:150px;
 overflow:scroll;
}

这将确保固定高度的模态将和正文部分可滚动

你还应该看看：Twitter bootstrap scrollable modal

于 2013-05-24T13:45:45.977 回答