web-dev-qa-db-fra.com

Comment faire la fermeture de la boîte de démarrage lors de l'utilisation d'une boîte de dialogue personnalisée

J'utilise bootbox pour afficher la boîte de dialogue.

Si j'utilise bootbox.confirm, bootbox.alert ou bootbox.Prompt, en appuyant sur la touche escape ou en cliquant en dehors de la boîte de dialogue, la boîte de dialogue s'est fermée comme prévu

mais lors de l'utilisation de bootbox.dialog, lorsque je clique en dehors de la boîte de dialogue ou en appuyant sur la touche escape, la boîte de dialogue ne se ferme pas, comment faire en sorte qu'elle se comporte comme les autres boîtes de dialogue?

var box = bootbox.dialog({
    show: false,
    backdrop: true,
    animate: false,
    title: 'Bla',
    message: 'bla bla bla',
    buttons: {
        cancel: {
            label: 'Cancel',
            className: 'btn-warning'
        },
        save: {
            label: 'Parse',
            className: 'btn-success',
            callback: function () {
                // handling with ajax
                return false;
            }
        }
    }
});
box.modal('show');
javascripttwitter-bootstrap-3modal-dialogbootbox
18
Kokizzu

Cela devrait le faire. Veuillez noter que cela n'a été testé que sur la v3. en utilisant bootstrap 2.3.2

$(document).on('click', '.modal-backdrop', function (event) {
    bootbox.hideAll()
});
32
tibc-dev

Ajoutez une fonction de rappel onEscape, qui peut avoir un corps vide.

Voir documents et exemple .

Code de base:

bootbox.dialog({
   onEscape: function() {},
   // ...
});
16
bart

Pour être honnête, je n'ai jamais vraiment utilisé de modal - il est venu d'un PR il y a très longtemps, mais je n'ai jamais été convaincu de son cas d'utilisation. Pas bon pour vous maintenant, mais la méthode est en fait considérée comme obsolète dans la v3.0.0 et sera probablement supprimée dans les futures versions - elle ne correspond tout simplement pas (pour moi) à la raison pour laquelle Bootbox a été créée et comme d'autres méthodes ont été peaufiné, amélioré et testé, il est resté quelque peu négligé.

Mais vous pouvez faire quelque chose comme ça

$(document).keyup(function(e) {
  if (e.keyCode == 27) {box.modal("hide");}   // esc
});
2
Miomir Dancevic

J'ai essayé d'autres réponses ici et elles n'ont pas fonctionné pour moi. Je ne sais pas si cela a à voir avec la version spécifique de la boîte de démarrage que j'utilisais ou une autre raison, mais j'ai simplement déployé ma propre solution pour:

  • fermez uniquement le dernier modal qui a été ouvert (c'est-à-dire pour les modaux imbriqués, ne les fermez pas tous)
  • choisir sélectivement les modaux qui se fermeront en cas de clic extérieur et ceux qui ne
  • travailler sur toutes les saveurs modales (dialogue, alerte, confirmation etc)
  • ne me demande pas de changer de bibliothèque ou de version de bibliothèque

en procédant comme suit:

function hideDialogOnOutsideClick(d) { // d = bootbox.dialog(...)
  d[0].addEventListener('click', function(e) {
    if(e.target == d[0])
      $(d).modal('hide');
    e.stopImmediatePropagation();
    return false;
  });
}

qui est utilisé comme ça:

var d = bootbox.dialog(...) // or alert, confirm etc
hideDialogOnOutsideClick(d);
1
mwag

Dans la version 3, avec dialogue, la toile de fond étant vraie ne fonctionne que lorsque onEscape est également vrai - il vous suffit donc de définir les deux sur true, par exemple.

bootbox.dialog({message:'Message', title:'Title', backdrop:true, onEscape:true})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
1
AndyS