it-swarm.com.de

So öffnen Sie zwei modale Dialoge gleichzeitig in Twitter Bootstrap

Ich habe einen Bootstrap-Dialog in meinem Projekt implementiert. Ich habe einige Löschfunktionen in diesem Dialogfeld, und die Löschbestätigungsnachricht öffnet einen weiteren Bootstrap-Dialog. Wenn jedoch der zweite Bestätigungsdialog geöffnet ist, ist der erste Dialog nicht deaktiviert, und alle Ereignisse funktionieren.

Gibt es eine Lösung, um das ursprüngliche Dialogfeld zu deaktivieren, wenn ein anderes Dialogfeld geöffnet wird?

Hier ist mein Code:

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();`
}

Bildschirmfoto:

Screenshot

Wenn der Dialog zur Löschbestätigung geöffnet ist, möchte ich den ersten Dialog deaktivieren.

16
Abhijit Pandya

Das Problem:

Um die Feinheiten modaler Dialoge in der Webentwicklung zu verstehen, müssen Sie etwas mehr über die Eigenschaft z-index und die Stacking-Kontexte verstehen.

Kurz gesagt, der Dialog fügt dem DOM zwei Hauptkomponenten hinzu: einen Hintergrund, der den gesamten Bildschirm einnimmt, und ein Div, das Ihren Dialog enthält. Jede dieser Elemente hebt sich vom Rest der Seite ab, da sie sich auf der Stammebene des DOM befinden und einen hohen Wert für ihre z-index-Eigenschaft erhalten. Wie hoch? Nun, fügen Sie einer leeren Seite ein leeres Modal hinzu, und Sie sehen die folgenden DOM-Elemente:

<div class = "Modal-Hintergrund einblenden"> </ div> <! - z-Index: 1030;  -> 
 <div class = "modaler Bootstrap-Dialog"> <! - z-Index: 1040;  -> 
 <div class = "modal-dialog"> <! - z-Index: 1050;  -> 

Der modal-backdrop vermittelt die Illusion eines echten modalen Prozesses, da er vor allem den anderen Inhalt darstellt, der verhindert, dass Klicks irgendwo darunter ausgelöst werden. Der modal-dialog darf nur dann Klicks erhalten, weil er oben des Hintergrunds gestapelt wird, indem ein höherer Z-Index bereitgestellt wird.

Das ist es! Das ist die ganze Trickkiste. Wenn also Bootstrap davor schützt, mehrere Dialoge zu verwenden , dann tun sie dies, weil das Stapeln schwierig wird. Wenn Sie ein anderes Element hinzufügen, wird es mit demselben exakten z-index gerendert. Dies bedeutet, dass es sich über dem regulären Seiteninhalt befindet, jedoch auf derselben Ebene wie das ursprüngliche Dialogfeld. Wenn das Original nicht vollständig abgedeckt wird, ist das Original weiterhin anklickbar, da sich darüber keine Kulisse befindet. 

Die Lösung:

Um dies zu beheben, müssen Sie Ihre eigene Methode zum Deaktivieren von Klicks auf Hintergrundmodale finden. Dieses Problem wurde anscheinend (teilweise) behoben. Siehe folgendes Beispiel:

Demo in jsFiddle

Der Bootstrap-Dialog hat es so gemacht, dass durch Klicken auf ein Dialogfeld einfach das letzte Dialogfeld im DOM geschlossen und das Ereignis als behandelt markiert wird, damit es keine weiteren Aktionen auslöst. Wenn der zweite Modal aktiv ist und Sie darauf klicken, wird nur der zweite Modal geschlossen.


Erweiterte Handhabung:

Wenn Sie möchten, dass der zweite Modal look wie der erste ist, müssen Sie dies manuell tun. 

Wenn das neue Modal erstellt wird, wird es mit seinem eigenen modal-backdrop geliefert. Wenn der zweite Modal angezeigt wird, können Sie ihn über dem Original anzeigen lassen, indem Sie den Z-Index relativ zum ersten Modal erhöhen. Im onshown-Ereignis müssen wir nur das aktuelle Modal und seine Überlagerung nehmen und den z-Index mit der .CSS-Methode ändern. Wir möchten, dass dies über allen vorhandenen Modalen angezeigt wird, also zählen wir zunächst die Anzahl der Modalen im DOM ($('.bootstrap-dialog').length) und erhöhen dann den Z-Index, sodass er höher ist als der nächsthöhere Dialog.

Rufe so an:

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();
}

Arbeitsdemo in jsFiddle

Bildschirmfoto:

 screenshot


Zum Beweis des Konzepts ist hier eine Demo, mit der Sie kontinuierlich Dialoge zu anderen Dialogen hinzufügen können

Unendliche Dialoge Fiddle


UX Achtung:

Während dies technisch möglich ist, können Modals innerhalb von Modals eine verwirrende UX erzeugen. Daher ist die richtige Antwort, wenn Sie das Problem haben, zu vermeiden, dass Sie den ursprünglichen Workflow vollständig umgehen und ihn auf eine vollständige Seite bringen Design mit einer URL und einem Zustand.

55
KyleMit

Fügen Sie zuerst Klasse zu primärem Modal hinzu: <div class="modal-content kk"> Ich verwende einfach:

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


});

wo .magla css ist:

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

}

Versuch sieht gut aus für mich.

1
milemilic mile

Meine bescheidene Lösung: Für jeden neuen Modal eine neue ID generieren. Dann verwalten Sie einfach alles über eine Variable ..

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

Blenden Sie einfach die aktuelle Modalität mit der Onclick-Methode aus

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