web-dev-qa-db-ja.com

Twitterで2つのモーダルダイアログを開く方法Bootstrapを同時に

プロジェクトにbootstrapダイアログを実装しました。そのダイアログにいくつかの削除機能があり、削除確認メッセージが別のbootstrapダイアログを開きます。確認ダイアログが開き、最初のダイアログは無効にならず、すべてのイベントが機能します。

別のダイアログが開いたときに元のダイアログを無効にする解決策はありますか？

ここに私のコードがあります：

function OpenDialogForSelectionAdmItem(title, content, callback) {
    var dlg = new BootstrapDialog({
        title: title,
        content: content,
        buttons: [{
            label: 'Save',
            cssClass: 'btn-primary',
            id: 'btnSave',
            onclick: function (dialog) {

            }
        },
        {
            label: 'Close',
            cssClass: 'btn',
            id: 'btnClose',
            onclick: function (dialog) {
                if (callback != "") {
                    callback(true);
                }
                dialog.close();
            }
        }]
    });

    dlg.open();`
}

スクリーンショット：

Screenshot

削除確認のダイアログが開いたら、最初のダイアログを無効にします。

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-dialog
16
Abhijit Pandya

問題：

Web開発におけるモーダルダイアログの複雑さを理解するには、 z-indexプロパティとスタックコンテキスト についてもう少し理解する必要があります。

要するに、ダイアログは2つの主要コンポーネントをDOMに追加することによって機能します。画面全体を占める背景と、ダイアログを構成するdivです。これらはそれぞれDOMのルートレベルに置かれ、_z-index_プロパティに高い値が与えられるため、ページの残りの部分から際立っています。 どのくらいですか？空白のモーダルを空白のページに追加すると、次のDOM要素が表示されます。

<div class = "modal-backdrop fade in"> </ div> <！- z-index：1030; -> 
 <div class = "modal bootstrap-dialog"> <！- z-index：1040; -> 
 <div class = "modal-dialog"> <！- z-index：1050; ->

_modal-backdrop_は、真のモーダルプロセスのように見えます。これは、他のコンテンツよりも上にレンダリングされるため、クリックが下のどこでも発生しないようにするためです。 _modal-dialog_がクリックを受け取ることができる唯一の理由は、より高いz-indexを提供することにより、背景のon topが積み重ねられているためです。

それだけです！これがトリックの袋です。 bootstrap 複数のダイアログの使用に対する注意 の場合、スタックがトリッキーになるのでそうします。別の要素を追加すると、同じ_z-index_は、通常のページコンテンツの上にあるが、元のダイアログと同じ平面上にあることを意味します。元のダイアログを完全にカバーしていない場合は、その上に背景がないため、元のボタンをクリックできます。

ソリューション：

これを解決するには、バックグラウンドモーダルのクリックを無効にする独自の方法を考え出す必要があります。この問題は解決されたようです（部分的に）。次の例を参照してください。

jsFiddleのデモ

Bootstrap Dialogは、ダイアログの外をクリックすると、DOMの最後のダイアログを単純に閉じ、イベントを処理済みとしてマークし、他のイベントを発生させないようにしました。 2番目のモーダルが起動しているときにクリックすると、発生するのは2番目のモーダルだけです。

より高度な処理：

2番目のモーダルをlookにしたい場合は、最初のモーダルと同じように、手動で行う必要があります。

新しいモーダルが作成されると、独自の_modal-backdrop_が付属します。 2番目のモーダルが表示されている場合、最初のモーダルに対してz-indexをインクリメントすることにより、元のモーダルを表示できます。 onshownイベントでは、現在のモーダルとそのオーバーレイを取得し、_.CSS_メソッドを使用してz-indexを変更するだけです。これを既存のモーダルの上に表示するため、最初にDOMのモーダルの数（$('.bootstrap-dialog').length）をカウントし、次にz-indexをインクリメントして、次に高いダイアログよりも高くします。

このように呼び出します：

_function OpenDialogForSelectionAdmItem(title, content, callback) {
    var dlg = new BootstrapDialog({
        title: title,
        message: content,
        onshown: function(dialog) {
            var tier = $('.bootstrap-dialog').length - 1;
            dialog.$modal.prev(".modal-backdrop")
                .css("z-index", 1030 + tier * 30);
            dialog.$modal
                .css("z-index", 1040 + tier * 30);
        } 
        // More Settings
    }).open();
}
_

jsFiddleでのデモの作業

スクリーンショット：

screenshot

概念実証として、他のダイアログの上にダイアログを継続的に追加できるデモがあります

無限ダイアログフィドル

UX注意：

これは技術的には実現可能ですが、 モーダル内のモーダルは紛らわしいUXを作成する可能性があります ですので、問題が発生した場合の正しい答えは、元のワークフローを採​​用し、 URLと状態を含むページ全体のデザイン。

55
KyleMit

最初にクラスをプライマリモーダルsoに追加します：<div class="modal-content kk">私は単に使用します：

$('#myModal1').on('shown.bs.modal', function () {
  $('.kk').addClass('magla');
  $('#myModal').modal('hide');
 });
$('#myModal1').on('hidden.bs.modal', function () {
  $('.kk').removeClass('magla');
  $('#myModal').modal('show');


});

.magla cssは次のとおりです。

.magla {
     -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}

よさそうだ。

1
milemilic mile

私の謙虚な解決策：新しいモーダルごとに新しいIDを生成します。次に、1つの変数ですべてを管理します。それは私の目的のために働いています、ところで。

var _MODAL_LAST;
$( document ).on( 'show.bs.modal' , '.modal' , function(){
    _MODAL_LAST = $(this);
});
$( document ).on( 'hide.bs.modal' , '.modal' , function(){
    if( _MODAL_LAST.attr('id') !== $(this).attr('id') ){
        return false;
    }else{
        _MODAL_LAST = $(this).prevAll('.modal:first');
    }
});
0
Raphael Barreto

Onclickメソッドを使用して実際のモーダルを非表示にするだけです

<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$('#actual-modal-id').modal('hide');">
    Text Button
</button>
0
Ivanus