Question

我有以下用于模态的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;  
}

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

Answer 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

动态调整内部div（引导模态）

1 个答案: