0

モーダル用に次の HTML があります。検索結果ビューにデータベースからのコンテンツが (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 divcreate another divsayの中で<div id='results'>。

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

この内部 div に結果を入力し、次の css を追加します。

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

これにより、固定高さのモーダル ウィルとボディ パーツがスクロール可能になります。

また、以下もご覧ください。Twitter ブートストラップのスクロール可能なモーダル

于 2013-05-24T13:45:45.977 に答える