web-dev-qa-db-ja.com

ブートボックスダイアログモーダルBootstrap 4

私のページには、テーブルがあります。そのテーブルのセルの1つにリンクがあります。そのリンクをクリックすると、jQueryスクリプトを実行しています。たとえば、リンクがクリックされた場合、Bootstrapダイアログを表示したい。これは Bootbox.js で簡単に実行できる。しかし、bootboxはBootstrap 4。

もともと、Bootstrap 3、何かを表示するクラス名はinでしたが、Bootstrap 4これはshowです。これを修正しましたが、現在の外観は次のとおりです。

enter image description here

このためにbootbox.jsを呼び出して生成されるHTMLは次のとおりです。

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Test Title?</h4>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>

問題は、クラスがmodal-headerであるdivでは、ボタンがh4要素の前に来るということです。それらが切り替えられた場合、この問題は解決されますが、それは私が助けを必要としているものです。ブートボックス構文を介してどのように行うのですか？ブートボックスがbootstrap 4をサポートするように更新されるまで、今のところタイトルを削除することができますが、これができるかどうか興味があります。

ここに私がこれまでに持っているものがあります：

                bootbox.confirm({
                    className: "show", // where I had to manually add the class name
                    title: "Test Title?",
                    message: "Test Message",
                    buttons: {
                        cancel: {
                            label: "<i class='fa fa-times'></i> Cancel"
                        },
                        confirm: {
                            label: "<i class='fa fa-check'></i> Confirm"
                        }
                    },
                    callback: function (result) {
                        // my callback function
                    }
                });
javascriptjqueryhtmlcssbootstrap-4
14
Grizzly

これを修正するには、次のように、見出しとxの位置（HTML内）を逆にするだけです。

_<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Test Title?</h4>
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>_

ここでcloseButtonを検索する場合： https://raw.githubusercontent.com/makeusabrew/bootbox/master/bootbox.js 物事は少しハードコードされています。

ただし、変更する場合

dialog.find(".modal-header").prepend(closeButton);

に：

dialog.find(".modal-header").append(closeButton);

そのファイルでは、問題を修正する必要があります。

編集：

実際には、dialog.find(".modal-title").html(options.title);もあります

そのため、タイトルにcloseButtonを追加する必要があります。その後、期待どおりに動作します。

1
WebDevBooster

あなただけのCSSでそれを解決することができます：

.bootbox .modal-header{
display: block;
}
22
Paweł Rymsza

次の方法で修正できます。

.bootbox .modal-header {
    flex-direction: row-reverse;
}
3
auri.borealis

人々がこれにつまずくと、bootstrap 4.をサポートするbootbox 5のバージョンがあります。あなたはそれをここで見つけることができます https://www.nuget.org/packages /Bootbox.JS/5.0.0-beta

1
Al Belmondo

おそらく、次のように、ブートボックスコールバック関数でdomを並べ替えることができます。

bootbox.confirm({
    ...
    callback: function () {
       $('.modal-header').prepend('.modal-title');                 
    }
});
0
Eliellel

ここに私がやったこととそれが働いた：あなたのjsファイル（私のものはbootbox.min.jsです）に行き、この行を見つけてください：

var m=b(n.closeButton);a.title?d.find(".modal-header").prepend(m)

それを変更します：

var m=b(n.closeButton);a.title?d.find(".modal-header").append(m)

したがって、「追加」のために変更するだけで、通常は閉じるボタンが右側にあるはずです。

0
Youssef Harkati