web-dev-qa-db-ja.com

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

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>
javascriptjqueryhtmlcsstwitter-bootstrap
91
Erdem Ece

コンテンツは動的である必要があるため、モーダルの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プロパティとして使用できます。
  • seen.bs.modalこのイベントは、モーダルがユーザーに表示されるようになったときに発生します（CSSの遷移が完了するのを待ちます）。クリックによって発生した場合、クリックされた要素はイベントのrelatedTargetプロパティとして使用できます。
  • hide.bs.modalこのイベントは、hideインスタンスメソッドが呼び出されたときにすぐに発生します。
  • hidden.bs.modalこのイベントは、モーダルがユーザーから隠されたときに発生します（CSSの遷移が完了するのを待ちます）。
  • loaded.bs.modalこのイベントは、モーダルがremoteオプションを使用してコンテンツをロードしたときに発生します。

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

  • Show - このイベントは、show instanceメソッドが呼び出されるとすぐに発生します。
  • 表示 - このイベントは、モーダルがユーザーに表示されるようになったときに発生します（CSSの遷移が完了するのを待ちます）。
  • hide - このイベントは、hideインスタンスメソッドが呼び出されるとすぐに発生します。
  • hidden - このイベントは、モーダルがユーザーから隠されたときに発生します（CSSの遷移が完了するのを待ちます）。
105
PSL

これは私のために働きました、上記のどれも働きませんでした。

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

PSLの答えがうまくいかなかったので、モーダルコンテンツを保持するdivにstyle="display: table;"を設定するだけでよいことがわかりました。モーダルコンテンツ自体は、それがどのくらい大きくなりたいかを示し、モーダルはそれを収容します。

22
Luminous

ブートストラップ3用

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
8
user2678868

あなたがCSSを書きたいなら、これをする多くの方法があります、そして、以下を加えてください

.modal-dialog{
  display: table
}

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

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

モーダルコンテンツクラスにdisplay:table;を追加しないでください。それはあなたの仕事をしました、しかし、大きいサイズのためにあなたのモーダルを処分してください以下のスクリーンショットを見てください。最初の画像は、モーダルダイアログにスタイルを追加した場合です In case if you add style to modal-dialog モーダルコンテンツにスタイルを追加した場合それは処分に見えます。 enter image description here

6
waqas ali

単純なCssは私のために働きます

.modal-dialog { 
max-width : 100% ;
}
5
Pascal

私は単にCSSをオーバーライドします。

.modal-dialog {
    max-width: 1000px;
}
1
Andrew Gale

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
Atanas Atanasov

垂直方向と水平方向にモーダルを中央に配置する単純なCSSソリューション。

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

.modal-dialog {
  align-self: center;
}
0
Kirk Ross

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

0
Furquan

モーダルdivにwidth:fit-contentを設定します。

0
Subhashis Pal

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;');
  });
0
SudarP

Bootstrap 4以降 - のスタイルは次のとおりです。

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

したがって、modalの幅をいくらか大きくしたい場合は、CSSでこれを使用することをお勧めします。

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

注設定width: 87vw;はブートストラップのmax-width: 500px;を上書きしません。

0
Zulkifil

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

.modal-body {
    overflow-y: auto;
}
0
Brett Drake