Comment ouvrir deux boîtes de dialogue modales dans Twitter Bootstrap en même temps

J'ai mis en œuvre bootstrap dialogue dans mon projet. J'ai quelques fonctionnalités de suppression dans cette boîte de dialogue, et le message de confirmation de suppression s'ouvre un autre fichier d'amorce de dialogue. Mais lors de la deuxième boîte de dialogue de confirmation est ouvert, la première boîte de dialogue n'est pas désactivé et tous les événements de travail.

Est-il une solution pour désactiver l'original de la boîte de dialogue lorsqu'une autre boîte de dialogue s'ouvre?

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

Capture d'écran:

Comment ouvrir deux boîtes de dialogue modales dans Twitter Bootstrap en même temps

Lorsque la boîte de dialogue de confirmation de suppression est ouverte, je veux désactiver la première boîte de dialogue.

source d'informationauteur Abhijit Pandya | 2014-03-28

  1. 52

    Le Problème:

    Afin de comprendre les subtilités de boîtes de dialogue modales dans le développement web, vous aurez besoin de comprendre un peu plus sur le propriété z-index et l'empilement des contextes.

    En bref, la boîte de dialogue des œuvres par l'ajout de deux principaux composants pour les DOM: un arrière-plan qui prend tout l'écran, et une div composant la boîte de dialogue. Chacun de ceux qui se démarquent du reste de la page, car ils sont placés au niveau de la racine du DOM et de donner une grande valeur pour leur z-index de la propriété. À quelle hauteur? Eh bien, essayez en ajoutant un espace modal vers une page blanche et vous verrez la suite des éléments du DOM:

    <div class="modal-toile de fond fade in"></div> <!-- z-index: 1030; --> 
<div class="modal bootstrap-boîte de dialogue"> <!-- z-index: 1040; --> 
<div class="modal-boîte de dialogue"> <!-- z-index: 1050; -->

    La modal-backdrop donne l'illusion d'un vrai modal processus parce qu'il rend au-dessus de tous les autres contenus qui l'empêche de clics à partir de cuisson en dessous. La seule raison pour laquelle le modal-dialog est autorisé à recevoir des clics est parce qu'il est empilé sur le dessus de l'arrière-plan, en fournissant un z-index supérieur.

    Que c'est! C'est le sac à malices. Alors, quand bootstrap met en garde contre l'utilisation de multiples boîtes de dialogueils le font, car le cumul devient délicat. Si vous ajoutez un autre élément, il est rendu avec le même exacte z-indexce qui signifie qu'il sera au-dessus de l'ordinaire le contenu de la page, mais sur le même plan que le dialogue d'origine. Si il n'est pas complètement couvrir l'original, l'original sera toujours cliquable car il n'y a pas de toile de fond au-dessus d'elle.

    La Solution:

    Afin de résoudre ce problème, vous devez venir avec votre propre façon de désactiver les clics sur l'arrière-plan des modaux. Ce problème semble avoir été (partiellement) résolu. Voir l'exemple suivant:

    La démo en jsFiddle

    Bootstrap Dialogue fait en sorte qu'en cliquant sur off d'une boîte de dialogue ferme simplement la dernière boîte de dialogue dans les DOM et les marques de l'événement comme traité de sorte qu'il ne se déclenche pas à autre chose. Si la deuxième modal est en place et vous cliquez en dehors de cela, la seule chose qui va arriver, c'est le deuxième modale va fermer.

    Plus Avancés De Manipulation:

    Si vous souhaitez que le deuxième modal look comme c'est sur le premier, vous devrez le faire manuellement.

    Lorsque la nouvelle modal est créé, il est livré avec son propre modal-backdrop. Lors de la deuxième modale est affichée, vous pouvez le faire apparaître au dessus de l'original en incrémentant son z-index par rapport à la première modal. Dans le onshown cas, il suffit de prendre le courant de modal et c'est de superposition et de modifier le z-index de l'aide de l' .CSS méthode. Nous voulons que ce soit pour apparaître au-dessus de l'existant des modaux, donc tout d'abord nous allons compter le nombre d'auxiliaires modaux dans les DOM ($('.bootstrap-dialog').length) et puis incrémenter le z-index, il est donc plus élevé que le prochain plus de dialogue.

    Appeler comme ceci:

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

    Travail de Démonstration dans jsFiddle

    Capture d'écran:

    Comment ouvrir deux boîtes de dialogue modales dans Twitter Bootstrap en même temps

    Comme une preuve de concept, voici une Démo qui vous permet de continuellement ajouter des boîtes de dialogue au-dessus des autres boîtes de dialogue

    Infini Dialogues Violon

    Quelques remarques:

    Je suis en utilisant le seul bootstrap-bibliothèque de dialogue que j'ai pu trouver à partir de la suite de GitHub du projet:

    http://nakupanda.github.io/bootstrap3-dialog/

    Dans l'avenir, si vous utilisez un relativement rare tiers de la bibliothèque, il serait vraiment utile pour les relier directement au lieu de demander aux gens de deviner. Sur cette même note, un travail de violon aurait vraiment gagner du temps ici, au lieu d'avoir à dupliquer vos efforts. Essayer de produire quelque chose qui immédiatement illustre le problème si quelqu'un peut exécuter leur propre version de votre code et de le reproduire. Il fait de dépannage beaucoup plus facile par environ un facteur de dix.

    Aussi, il semble que vous avez une mauvaise propriétés sur votre mise en œuvre.

    Je voudrais changer les suivantes:

    • onclick → action
    • content → message

    Vous pouvez voir mon violon pour la mise en œuvre complète.

  2. 1

    D'abord ajouter une classe de primaire modale afin:<div class="modal-content kk">
    J'utilise simplement:

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


});

    où .magla css est:

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

}

    Essayez semble bon pour moi.

  3. 0

    Juste cacher la véritable modale à l'aide de la méthode onclick

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

    Mon humble solution: Générer un nouveau numéro d'identification pour chaque nouveau modal. Ensuite, il suffit de gérer le tout par le biais d'une seule variable.
    Il travaille pour mes fins, btw.

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