コンテンツに基づいて動的にTwitter Bootstrapモーダルのサイズを変更する方法

101

YouTubeのビデオ、Vimeoのビデオ、テキスト、Imgurの写真など、さまざまな種類のデータを含むデータベースコンテンツがあります。それらの高さと幅はすべて異なります。インターネットを検索しているときに私が見つけたのは、サイズを1つのパラメーターに変更することだけです。ポップアップのコンテンツと同じである必要があります。

これは私のHTMLコードです。また、Ajaxを使用してコンテンツを呼び出します。

<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>
javascript  jquery  html  css  twitter-bootstrap 
— エルデムエース
ソース

回答:

112

コンテンツは動的でなければならないので、モーダルのshowイベントで動的にモーダルのcssプロパティを設定すると、モーダルのサイズが変更され、デフォルトの仕様が上書きされます。ブートストラップである理由は、以下のようにcssルールを使用してモーダルボディに最大高さを適用します。

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

したがって、jquery cssメソッドを使用して動的にインラインスタイルを追加できます。

新しいバージョンのブートストラップを使用する場合 show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

古いバージョンのブートストラップを使用する場合 show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

または、CSSルールを使用してオーバーライドします。

.autoModal.modal .modal-body{
    max-height: 100%;
}

このクラスautoModalをターゲットモーダルに追加します。

フィドルでコンテンツを動的に変更すると、それに応じてモーダルのサイズが変更されます。 Demo

新しいバージョンのブートストラップは、利用可能なを参照してくださいevent names。

  • show.bs.modal このイベントは、show instanceメソッドが呼び出されるとすぐに発生します。クリックが原因の場合、クリックされた要素はイベントのrelatedTargetプロパティとして利用できます。
  • shown.bs.modal このイベントは、モーダルがユーザーに表示されたときに発生します（CSSの移行が完了するまで待機します）。クリックが原因の場合、クリックされた要素はイベントのrelatedTargetプロパティとして利用できます。
  • hide.bs.modal このイベントは、インスタンスの非表示メソッドが呼び出されるとすぐに発生します。
  • hidden.bs.modal このイベントは、モーダルがユーザーから非表示にされたときに発生します（CSSの移行が完了するまで待機します）。
  • loaded.bs.modal このイベントは、モーダルがリモートオプションを使用してコンテンツをロードしたときに発生します。

古いバージョンのブートストラップがmodal events サポートされています。

  • Show-このイベントは、show instanceメソッドが呼び出されるとすぐに発生します。
  • 示される -このイベントは、モーダルがユーザーに表示されると発生します（CSS遷移が完了するまで待機します）。
  • hide-このイベントは、インスタンスの非表示メソッドが呼び出されるとすぐに発生します。
  • hidden-このイベントは、モーダルがユーザーから非表示にされたときに発生します（CSS遷移が完了するまで待機します）。
— PSL
ソース
#modalを.moda-bodyと同じに変更する必要がありましたが、完全に機能します。どうもありがとうございました！
— Erdem Ece 2013
8
@PSL、答えのためと+1 でSOのkbdを紹介します。
— Rolando Isidoro 2013年
showイベントが機能しないようです。これは機能しました：$('#modal').on('show.bs.modal', function () { getbootstrap.com/javascript/#modals-events
— joym8 '
詳細と新旧に対応するための+1。画面の幅全体を埋め尽くすだけでなく、実際には動的なサイズであったとしても。
— 2015年
実行時の@PSLでモーダルの幅を操作するにはどうすればよいですか？
— Sredny M Casanova
119

これは私にとってはうまくいきました、上記のどれもうまくいきませんでした。

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}
— アミット・シャー
ソース
2
@GreenAsJadeは、このリンクを理解するのに役立ちます：colintoh.com/blog/display-table-anti-hero iandevlin.com/blog/2013/06/css/css-stacking-with-display-table
— Amit Shah
1
@maheshreddyようこそ、役立つ場合は+1を投票することを忘れないでください。他の人がこの答えを信頼して試してみることができます。
— アミットシャー
高さを動的に設定しますが、今回は画面の左側にモーダルダイアログが開かれます。それを修正するには？
— Jack
1
ただし、これはレスポンシブなモバイルビューでは機能しません。それはラップトップ画面でかなり働いています。
— chetan 2016
4
これは機能しましたが、モーダルがページの垂直方向の中央に配置されないという意図しない影響がありました。大したことではありませんが、何か言いたいと思いました。
— ジョンアラード
22

PSLの答えがうまく機能しなかったので、モーダルコンテンツを保持するdivをに設定するだけで済みましたstyle="display: table;"。モーダルコンテンツ自体は、それがどれほど大きくなりたいかを示し、モーダルはそれに対応します。

— 明るい
ソース
5
PSLの回答も機能しませんでした。（多分私はAngularバージョンのブートストラップを使用していたので）これは私にとってはうまくいきました。このスタイルは.modal-dialogクラス+1に追加されることに注意してください
— user227353
私はあなたの解決策を「モーダルコンテンツ」クラスとして持つdivに適用しました、私のために働きました。
— Mehdi、
10

これを行うには、CSSを記述して次の行を追加する方法がたくさんあります

.modal-dialog{
  display: table
}

インラインで追加したい場合 

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

display:table;モーダルコンテンツクラスに追加しないでください。それはあなたの仕事をしましたが、大きなサイズのためにあなたのモーダルを処分します以下のスクリーンショットを見てください。最初の画像は、モーダルダイアログにスタイルを追加する場合 modal-contentにスタイルを追加した場合にmodal-dialog にスタイルを追加した場合です。それは処分されたように見えます。 ここに画像の説明を入力してください

— ワカサリ
ソース
7

ブートストラップ3の場合

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
— user2678868
ソース
4
これを追加するだけで、hidden.bs.modalはモーダルが閉じられた後に発生します。show.bs.modalを使用して、モーダルがトリガーされたときにブートストラップ3で起動します。
— d3c0y 2013年
これにより、ダイアログのサイズが変更されますか？これは単に、モーダルダイアログが非表示（または表示）のときにトリガーされるコールバック関数です。
— user1438038
1

gijgo.comのjqueryダイアログプラグインを使用し、幅をautoに設定すると、これを行うことができます。

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>
スニペットを展開

resizableをtrueに設定すると、ユーザーがサイズを制御できるようにすることもできます。これに関するデモは、http：//gijgo.com/Dialog/Demos/bootstrap-modal-resizableで確認できます。

— アタナスアタナソフ
ソース
1

モーダルを垂直方向および水平方向に中央揃えにする単純なCSSソリューション：

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}
— カーク・ロス
ソース
0

Bootstrap 2の場合、モデルの高さを動的に自動調整

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });
— SudarP
ソース
0

ブートストラップ3と同じ問題があり、モーダルボディのdivの高さが442pxを超えたくありません。これは私の場合、それを修正するために必要なすべてのCSSでした：

.modal-body {
    overflow-y: auto;
}
— ブレット・ドレイク
ソース
0

Mine Solutionは以下のスタイルを追加するだけでした。 <div class="modal-body" style="clear: both;overflow: hidden;">

— フルクアン
ソース
0

Bootstrap 4以降-次のスタイルがあります。

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

したがって、モーダル幅をいくらか大きな幅に変更する場合は、CSSで次のように使用することをお勧めします。

.modal-dialog { max-width: 87vw; }

設定width: 87vw;はブートストラップを上書きしないことに注意してくださいmax-width: 500px;。

— ズルキフィル
ソース
0

私の検索は私をここに導いたので、私の2セント相当のアイデアを追加することもできます。Monkey対応のTwitter Bootstrapモーダルを使用している場合は、次のようなことができます。

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

お役に立てれば。

— jpllosa
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.