可変コンテンツの Twitter ブートストラップ モーダルのサイズを動的に変更するにはどうすればよいですか?

可変コンテンツの Twitter ブートストラップ モーダルのサイズを動的に変更する

動画、画像、動画など、モーダル内のさまざまなコンテンツ タイプを扱う場合テキストの場合、モーダルのサイズをコンテンツに基づいて動的に調整するのは難しい場合があります。オンラインで利用できるほとんどのソリューションは、単一のパラメーターを使用したサイズ変更のみに対応しています。

コンテンツ取得用の Ajax と組み合わせて、この状況を処理するために使用できる HTML コードの 1 つは次のとおりです。

<code class="html"><div id="modal" 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="ModalLabel"></h3>
    </div>
    <div class="modal-body">
    </div>
</div></code>

さまざまなソリューションを試した結果、次のコードは、モーダルのコンテンツに基づいて動的にサイズを変更するのに効果的であることがわかりました:

.modal-dialog {
    position: relative;
    display: table; /* This is crucial */
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
    min-width: 300px;
}

このコードは、モーダルのダイアログが相対的に配置され、テーブルとして表示されるようにします。 、自動垂直スクロールと水平スクロールがあり、モーダル内のコンテンツに基づいて幅が自動的に調整されます。モーダルが狭くなりすぎないように、最小幅 300px が設定されています。

以上が可変コンテンツの Twitter ブートストラップ モーダルのサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。