twitter-bootstrap - Bootstrap Modal - 自動高さ

Question

私はbootstapのモデルプラグインを使用しています。ご覧のとおり、いくつかのドロップダウン項目が下部のバーの下にあります。

その状況でモーダルの高さを設定して、すべてのドロップダウン項目を表示し、そのスクロールバーを取り除く方法は?

Answer 1

これらの 2 つのルールを追加するだけです ( !importantSO スニペットのためにここにのみあり、必要ありません)。

.modal { overflow: visible !important; }
.modal-body { overflow-y: visible !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
<!-- Modal -->
<div id="myModal" 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">Modal header</h3>
  </div>
  <div class="modal-body">
    <div class="dropdown">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="#">Foo</a></li>
          <li><a href="#">Bar</a></li>
          <li><a href="#">Baz</a></li>
          <li><a href="#">Foo</a></li>
          <li><a href="#">Bar</a></li>
          <li><a href="#">Baz</a></li>
      </ul>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Answer 2

z-indexモデルボックスフッターよりも高い属性を持つクラスを追加するだけです。

z-index を機能させるには、position = relative、absolute、または fixed を設定する必要もあります。また、z-index を 5000 などにすると役立つ場合があります。(モーダルの z インデックスは 2000 年代よりも高い場合があります。

だからあなたのCSSにこれを追加します：

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

.modal-body クラスには、overflow-y: auto プロパティがあります。これを次のように変更する必要がある場合があります。

.modal-body {
    overflow-y:visible;
}