Question Interdire la fenêtre modale Twitter Bootstrap de la fermeture


Je crée une fenêtre modale en utilisant Twitter Bootstrap. Le comportement par défaut est que si vous cliquez en dehors de la zone modale, le modal se fermera automatiquement. Je voudrais désactiver cela, c'est-à-dire ne pas fermer la fenêtre modale lorsque je clique en dehors du modal.

Quelqu'un peut-il partager le code jQuery pour le faire?


508
2018-03-27 17:10


origine


Réponses:


Je crois que vous voulez définir le valeur de fond à statique. Si vous voulez éviter que la fenêtre se ferme lors de l’utilisation du Esc clé, vous devez définir une autre valeur.

Exemple:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

OU si vous utilisez JavaScript:

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

650
2018-03-27 17:18



Réglez juste le backdrop propriété à 'static'.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

Vous pouvez également définir le keyboard propriété à false parce que cela empêche la fermeture du modal en appuyant sur Esc touche sur le clavier.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
})

myModal est l'ID de la div qui contient votre contenu modal.


305
2017-07-12 00:36



Vous pouvez également inclure ces attributs dans la définition modale elle-même:

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

208
2018-01-09 03:34



Si vous avez déjà initialisé la fenêtre modale, vous pouvez réinitialiser les options avec $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) pour s'assurer qu'il appliquera les nouvelles options.


46
2017-07-19 16:41



Remplacer l'événement Bootstrap 'hide' de Dialog et arrêter son comportement par défaut (pour disposer de la boîte de dialogue).

Veuillez voir l'extrait de code ci-dessous:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

Cela fonctionne bien dans notre cas.


32
2017-08-06 11:54



Oui, vous pouvez le faire comme ceci:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

28
2018-01-01 17:54



Un peu comme la réponse de @ AymKdn, mais cela vous permettra de changer les options sans réinitialiser le modal.

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

Ou si vous avez besoin de faire plusieurs options, JavaScript with est pratique ici!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

Si le modal est déjà ouvert, ces options ne prendront effet que la prochaine fois le modal est ouvert.


22
2018-04-25 22:10



Ajoutez simplement ces deux choses

data-backdrop="static" 
data-keyboard="false"

Ça va ressembler à ça maintenant

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

Il va désactiver le bouton d'échappement et aussi le clic n'importe où et cacher.


12
2018-05-16 17:55



Vous pouvez désactiver le comportement click-to-close de l'arrière-plan et en faire le comportement par défaut pour tous vos modals en ajoutant ce JavaScript à votre page (assurez-vous qu'il est exécuté après le chargement de jQuery et Bootstrap JS):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

11
2017-09-30 20:05