web-dev-qa-db-fra.com

Changer Bootstrap option modale une fois qu'elle existe déjà

J'utilise Bootstrap Modal . Je le déclare, je l'appelle, je le montre ... tout semble aller bien.

Mais que se passe-t-il si j'ai un modal déjà existant précédemment affiché avec la propriété "keyboard" sur false et que je veux le changer à tout moment? Je veux dire quelque chose comme:

Tout d'abord, je crée un Modal en faisant cela (comme vous pouvez le voir, je déclare la propriété du clavier de mise modale sur false):

$('#myModal').modal({
    show: false,
    backdrop: true,
    keyboard: false
});

Mais ensuite, je déclare ce gestionnaire d'événements, ce qui signifie que si "quelque chose" se produit, je veux que la propriété keyboard soit définie sur true.

 $('#myModal').on('shown', function(e) {
    if (something){
        $('#myModal').modal({keyboard: true});
    }
 }

Alors, quand je vais

$("#myModal").show();

Le gestionnaire d'événements ne fait pas ce qu'il est censé faire, car je n'arrive pas à fermer le modal une fois que la touche Échap est enfoncée. Mais je suis complètement sûr que "quelque chose" est vrai et j'ai vérifié et revérifié que $('#myModal').modal({keyboard: true}) est exécuté.

Une idée de pourquoi cela ne met pas à jour la valeur de l'option de configuration?

javascriptjqueryjquery-pluginstwitter-bootstrapmodal-dialog
35
ElPiter

Pour modifier les paramètres de configuration sur le plug-in Bootstrap déjà démarré, tel que le Modal, vous devez accéder à l’objet plug-in attaché à l’élément, comme $('#pluginElement').data['somePlugin'], puis définir le options dedans.

Pour le Modal, vous avez besoin de:

$('#myModal').data('modal').options.keyboard = true;

Démo JSFiddle (ancienne)

Pour Bootstrap 3 (comme mentionné dans les commentaires de @Gerald), vous avez besoin de bs.modal:

$('#myModal').data('bs.modal').options.keyboard = true;

Exemple modal en attente

47
merv

Un peu au-delà de la portée de l'OP, mais c'est maintenant deux fois que j'ai cherché la même solution (ma mémoire est de la merde) et deux fois que je suis tombé sur cette question qui m'a conduit à ma réponse éventuelle. Mon problème était de savoir comment transformer un modal déjà initié et affiché, qui était "fermable", en un modèle "non fermable". Dans les rares cas où un autre utilisateur a besoin de cette réponse, voici ce que j'ai fait sur la base de la réponse acceptée:

* bootstrap3 utilisé

$('#modal').off('keyup.dismiss.bs.modal'); // disable escape key
$('#modal').data('bs.modal').options.backdrop = 'static';
$('#modal button.close').hide();

Notez que je n'ai pas changé la propriété options.keyboard en false (suivi de l'appel à escape ()) comme suggéré ci-dessus. Je ne pouvais pas faire fonctionner cela, donc après avoir consulté la source Bootstrap, j'ai vu que tout ce qu'il faisait était simplement de supprimer un écouteur d'événements pour 'keyup.dismiss.bs.modal'.

Pour réactiver les choses (dans mon scénario, lorsque le modèle est masqué):

$('#modal').on('hidden.bs.modal', function (e) {
    $(this).data('bs.modal').escape(); // reset keyboard
    $(this).data('bs.modal').options.backdrop = true;
    $('button.close', $(this)).show();
});

Cela semble COMPLÈTEMENT maladroit et cassera certainement dans les prochaines versions de Bootstrap, mais fonctionne pour l'instant ...

À votre santé :)

22
nokturnal

Pour bootstrap4

Pour désactiver la fermeture modale sur le bouton d'échappement:

$('#myModal').off('keydown.dismiss.bs.modal');

Pour désactiver la fermeture modale en cliquant sur fond:

$('#myModal').data('bs.modal')._config.keyboard = false;

Comme averti par nocturne, cela pourrait casser dans les futures versions de bootstrap.

9
user3563059

Vous pouvez également ajouter un attribut dans votre balise HTML: data-keyboard = "false"

<div id="myModal" class="modal hide fade" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

Ça marche pour moi!

2
user2199629

Définition de Backdrop et de la touche Échap pour ne pas fermer le modal lorsque le modal est déjà ouvert

$('div[name="modal"]').data('bs.modal').options.backdrop = 'static';
$('div[name="modal"]').off('keydown.dismiss.bs.modal');

Désactivez la toile de fond et le but de la touche esc pour ne pas fermer le modal

$('div[name="user_profile_modal"]').data('bs.modal').options.backdrop = true;
$('div[name="user_profile_modal"]').data('bs.modal').escape();
2
Zeng Xin Reiner Cheung

Une autre option si vous ne savez pas si le modal a déjà été ouvert ou pas encore et que vous devez configurer les options modales (Bootstrap 3):

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Merci @nokturnal

1
Cava