web-dev-qa-db-fra.com

Comment ouvrir simultanément deux boîtes de dialogue modales dans Twitter Bootstrap

J'ai implémenté le dialogue d'amorçage dans mon projet. J'ai quelques fonctionnalités de suppression dans cette boîte de dialogue, et le message de confirmation de suppression ouvre une autre boîte de dialogue d'amorçage. Mais lorsque la deuxième boîte de dialogue de confirmation est ouverte, la première boîte de dialogue n'est pas désactivée et tous les événements fonctionnent.

Existe-t-il une solution pour désactiver la boîte de dialogue d'origine 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:

Screenshot

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

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

Ajoutez d’abord la classe au modal primaire pour: <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');


});

où .magla css est:

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

}

Essaye bien pour moi.

1
milemilic mile

Ma solution modeste: générer un nouvel identifiant pour chaque nouveau modal. Ensuite, il suffit de tout gérer avec une seule variable… .. Cela fonctionne pour mes besoins, d'ailleurs.

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

Il suffit de cacher le modal réel en utilisant la méthode onclick

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