34

IE8をサポートする必要があります。モーダル自体は正常に動作しますが、サイズを変更しようとしても (Firefox では正常に動作します)、IE8 では動作しません。

modal-dialog div (Bootstrap 構造の 2 番目にネストされたもの) にクラス (この例では wide-modal) を追加し、CSS を介して幅を適用するだけです。

HTML:

       <div class="modal fade" id="modalTest" role="dialog">
            <div class="modal-dialog wide-modal">
              <div class="modal-content ">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Testing Modal</h4>
                </div>
                <div class="modal-body">
                  <img src="content/Example-Infographic.jpg" width="100%" />
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

CSS:

.wide-modal {
    width: 60%;
}

上下の div にクラスを追加しようとしましたが、効果はありませんでした。Firefox では魅力的に機能しますが、IE8 ではまったく効果がありません。ピクセル幅でも試しましたが、違いはありません。私は Respond.js ライブラリを配置しているので、一般的に IE8 はこれ以外の動作をしています。

4

6 に答える 6

14

CSS と jQuery を組み合わせて、このページのヒントに従って、Bootstrap 3 を使用して滑らかな幅と高さを作成しました。Win7 の IE8 でもこれをテストしましたが、うまく機能しました。

最初に、コンテンツ領域の幅とオプションのスクロールバーを処理するための CSS

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

そして、必要に応じてコンテンツ領域の高さを調整するためのjQuery

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/の完全な記事とコード

于 2013-10-17T13:43:16.423 に答える
10

遅いことはわかっていますが、モーダルにクラスを追加できるbs3ドキュメントで見つけたばかりですmodal-lg

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
  Large modal
</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
     ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
  Small modal
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
   <div class="modal-content">
     ...
   </div>
 </div>
</div>
于 2014-02-26T18:00:56.827 に答える
4

もちろん、これによりすべてのモーダル ウィンドウの幅が変更されますが、これがどのように機能するかについてのより良いアイデアが得られるかもしれません。モーダルウィンドウをこのように変更しました。

    .modal-body {
        position: relative;
        padding: 20px;
        min-width: 800px; /* SET THE WIDTH OF THE MODAL */
    }

    .modal-content {
        position: relative;
        background-color: #fff;
        border: 1px solid #999;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 6px;
        outline: 0;
        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        background-clip: padding-box;
        width: 900px; /* SET THE WIDTH OF THE MODAL */
        margin: 50px 0 0 -150px; /* CHANGE MARGINS TO ACCOMMODATE THE NEW WIDTH */
    }



<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
于 2013-08-28T19:55:01.600 に答える