web-dev-qa-db-ja.com

bootstrap=動的にモーダルダイアログのサイズを変更する

ユーザーの選択に基づいてコンテンツを表示するモーダルポップアップ（ブートストラップ）があります

これは、ユーザーの選択を確認するために使用したJavaScriptコードです

PlayerMP.getFunctionalDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
    type: "GET",
    url: PlayerMP.URL,
    data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
    success: function (FunctionalSplitsJS) {
        if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {

            $("#divFunctionalDetails").html(FunctionalSplitsJS);
            switch (type) {
                case 1:
                    $("#divFunctionalsSplit");      //the table goes out of the modal window                           
                     break;
                case 2:
                    TallyFunctionalSheet();
                    $("#divFunctionalsSplit"); 
                    break;
                case 3:
                    $("#divFunctionalsSplit"); 
                    break;
            }                

             $("#divFunctionalsSplit").modal('show');
        }
        else
            window.location.href = "../Login.aspx?SessionExpired=1";
    }
});
}
  • 最初のケースには、モーダルポップアップ内に表示されるはずのテーブルがありますが、テーブルはモーダルウィンドウの外に出ます（モーダルウィンドウの幅には問題がありますが、table-responsiveは動作しているようです）しかし、タブレットの幅に合わせてブラウザのサイズを変更すると、テーブル/モーダルは互いに一致するように自動的にサイズ変更されます。
  • モーダルの2番目と3番目のケースの幅は正常に機能するようです。

これは、呼び出されるモーダルウィンドウのコードです

 <div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-hidden="true">  
        <div class="modal-dialog">
            <div class="modal-content"> 
                  <div class="modal-body">
                    <div class="table-responsive">
                        <div id="divFunctionalDetails"></div>
                      </div>
                   </div>
                   <div class="modal-footer">
                   <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
                   </div>
            </div>
        </div>
 </div>
  • フルスクリーンブラウザ Full screen image
  • ブラウザのサイズ変更 Resized Image
javascriptcssmodal-dialogtwitter-bootstrap-3
8
jayeshkv

デフォルトでは、ブートトラップは.modal-dialogの幅を600px（768ピクセル以上の大画面）またはauto（小画面）に設定します。以下のコードでこれを上書きします。

$('#myModal').on('shown.bs.modal', function () {
    $(this).find('.modal-dialog').css({width:'auto',
                               height:'auto', 
                              'max-height':'100%'});
});

（ベース： https://stackoverflow.com/a/16152629/2260496 ）

それをより動的にするには、テーブルの幅（jQuery width（）またはinnerwidth（））を計算し、それに応じてモーダルダイアログの幅を設定する必要があります。

参照： http://bootply.com/88364

23
Bass Jobsen

これは少なくとも私にとってはうまくいきました：

.modal-dialog{
    position: relative;
    display: table; /* <-- This makes the trick */
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}
14
Amit Shah

これをあなたのコードに変更してください

<div class="modal-dialog" style="width: 95%">

この

<div class="table-responsive" style="width:100%">
2
Savan Kachhiya Patel

モーダルを保持しているdiv内でdisplay: table;を設定すると、それに応じてサイズが変更されます。私のモーダルはドラッグ可能で、ブラウザのサイズを変更してもサイズは変更されませんが、これは動的なモーダルサイズで見つけた唯一の実行可能なソリューションです。

2
Luminous
$('#myModal').on('shown.bs.modal', function () {
    $(this).find('.modal-dialog').addClass('modal-lg');
});
1
M.Thenmozhi

私は同じ問題を抱えていましたが、問題はモーダルそのものではないことがわかりました。内部の各要素にIDを追加し、CSSを介してすべての要素にwidth：100％を追加します。

それは私のために働いた。

0
user3460493