web-dev-qa-db-fra.com

Empêcher Bootstrap Modal de disparaître en cliquant à l'extérieur ou en appuyant sur échap?

J'utilise le modal Twitter Bootstrap comme fenêtre d'assistant et je voudrais empêcher l'utilisateur de le fermer lorsqu'il clique en dehors du modal ou lorsqu'il appuie sur échap. Au lieu de cela, je veux qu'il soit fermé lorsque l'utilisateur appuie sur le bouton d'arrivée. Comment pourrais-je réaliser ce scénario?

htmltwitter-bootstrapmodal-dialog
368
Ehsan Zargar Ershadi

Si vous utilisez JavaScript, alors:

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

et si HTML:

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

Fonctionne aussi, data-backdrop="static" à cliquer et data-keyboard="false" à Esc dans votre modal div: 

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
212
CesarMiguel

Vous pouvez également utiliser Direct en mode bootstrap. 

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
43
tarun chotia

Ajoutez simplement les attributs data-backdrop="static" et data-keyboard="false" à ce modal.

Par exemple.

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

Vous pouvez utiliser le code ci-dessous

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

pour changer le comportement par défaut.

22
Rafael Keller

J'utilise ces attributs et ça marche, data-keyboard="false" data-backdrop="static"

16
Arsalan Ahmed Khan
jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});
13
Selva Balaji
<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">
9
Ramesh kumar

Ce code empêche la fermeture modale si vous cliquez en dehors de modal.

   $(document).ready(function () {
    $('#myModal').modal({
           backdrop: 'static',
           keyboard: false
    })
   })
5
Rohit Parte

Si vous avez besoin de désactiver en cliquant à l'extérieur mais d'activer en appuyant sur Échap

$ ('# myModal'). modal ({
 backdrop: 'static', // Ceci est désactivé pour un événement extérieur au clic 
 keyboard: true // pour un événement clavier 
})
5
HoangLong85

Le script suivant a fonctionné pour moi:

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});
4
Nabid

Vous devriez utiliser backdrop static, false sur le clavier. et peut utiliser le bouton de fermeture en utilisant jQuery ou peut supprimer du HTML modal. J'espère que cette aide.

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');
1
Anurag Tiwari

Votre code fonctionne lorsque je clique à côté du modal, mais si j'utilise le champ html input dans modal-body, puis placez le curseur sur cette entrée, puis appuyez sur la touche esc, le modal étant fermé . Cliquez ici

1
Marudhu Raj

Si vous devez configurer ceci après que le modal soit affiché, vous pouvez utiliser la solution @Nabid. Cependant, vous devez parfois autoriser la méthode some à fermer le modal. En supposant que vous ayez un bouton avec la classe really-close-the-modal, qui devrait vraiment fermer le modal, vous pouvez utiliser ce code (jquery):

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

Ce n’est pas vraiment une bonne conception de code, mais cela m’a aidé dans une situation où le modal était présenté avec une animation de chargeur, jusqu’à ce qu’une demande ajax soit renvoyée, et c’est seulement à ce moment-là que je pourrais savoir si le modal devait être configuré pour éviter les réponses "implicites". fermeture. Vous pouvez utiliser une conception similaire pour empêcher la fermeture du modal pendant son chargement.

0
youen
<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

je pense que ce code peut vous aider empêcher la fermeture modale des fichiers css et bootstrap

0
shubhangi singh
<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

ajoutez simplement l'attribut data-backdrop et data-keyboard à votre bouton sur lequel le modèle est ouvert.

0
Sumit Kumar Gupta