8

IE (IE 8 / IE 9) で Bootstrap 3 とともに Bootbox 4 を使用していますが、すべてが意図したとおりに動作します。

Bootstrap 3 では、次のように CSS でモーダル幅を設定できるように見えますが、このようなものはすべてのモーダルを変更します。

.modal-dialog {
    width:70% !important;
}

CSS、jQuery、または Bootbox 設定で、特定の 1 つのモーダルに対してのみ Bootbox アラート モーダルの幅を変更できる方法はありますか? Bootbox ページには非常に短いドキュメントしかなく、これに関する情報は他に見つかりませんでした。

アップデート

特定のモーダルを作成する JS (サンプル データ付き):

bootbox.dialog({
    message: " \
        <table class='table table-hover'> \
            <thead> \
                <tr> \
                    <th>Item Name</th> \
                    <th>Location</th> \
                    <th>Path</th> \
                    <th>Last Update</th> \
                </tr> \
            </thead> \
            <tbody> \
                <tr> \
                    <td>Item 1</td> \
                    <td>Navbar - Level 2</td> \
                    <td>Products - blabla</td> \
                    <td>Added by xxx on 05 Aug 2014</td> \
                </tr> \
            </tbody> \
        </table>",
    title: "Search Results",
    buttons: {
        main: {
            label: "Close",
            className: "btn-primary"
        }
    },
    className: "modal70"
});

そして私の現在のCSS：

.modal-dialog.modal70 {
    width:70% !important;
}
4

3 に答える 3

14

これを試して：

.modal70 > .modal-dialog {
    width:70% !important;
}


更新:

デモを試す

于 2014-08-10T09:57:21.253 に答える
6

追加情報として...

ドキュメントにあるように、コンストラクターの「サイズ」プロパティを使用してモーダルのサイズを制御できます。

関連する Bootstrap モーダル サイズ クラスをダイアログ ラッパーに追加します。
有効な値は「大」と「小」です (デフォルト: null)

bootbox.dialog({
    size: <small|large>
});

使用例についてはスニペットを参照してください(フルスクリーンで最適に表示されます)

$(".size-by-funcion-0").click(function() {
    bootbox.dialog({
        size: "null",
        title: "Default Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-1").click(function() {
    bootbox.dialog({
        size: "small",
        title: "Small Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-2").click(function() {
    bootbox.dialog({
        size: "large",
        title: "Large Size Modal Example",
        message: "...",
    });
});

/*********************/
// or make it dynamic... with only one function
$(".dynamic-size").click(function() {
    bootbox.dialog({
        size: $(this).data('size'),
        title: "Dynamic Size Modal Example",
        message: "...",
    });
});
p {
    cursor: pointer;
    background-color: #ccc;
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://github.com/makeusabrew/bootbox/releases/download/v4.3.0/bootbox.min.js"></script>

<p class="size-by-funcion-0">Modal with the default size</p>
<p class="size-by-funcion-1">Modal with "size:small"</p>
<p class="size-by-funcion-2">Modal with "size:large"</p>

<hr />

<p class="dynamic-size" data-size="null">Modal with "size:default"</p>
<p class="dynamic-size" data-size="small">Modal with "size:small"</p>
<p class="dynamic-size" data-size="large">Modal with "size:large"</p>

ソースの詳細: http://bootboxjs.com/documentation.html

注: Bootstrap 3.1.0 以降が必要です。

于 2015-05-06T12:05:26.820 に答える