Désactiver la fenêtre modale Bootstrap de Twitter à partir 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, la zone modale se fermera automatiquement. Je voudrais désactiver cela -- c'est-à-dire ne pas fermer la fenêtre modale en cliquant en dehors de la modale.

est-ce que quelqu'un peut partager le code jQuery pour faire ça?

512
demandé sur Peter Mortensen 2012-03-27 21:10:49

18 réponses

je crois que vous voulez mettre le valeur de fond à statique . Si vous voulez éviter la fermeture de la fenêtre en utilisant la touche Esc , 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
});
655
répondu Nobita 2017-07-29 18:34:00

vient de définir la propriété backdrop à 'static' .

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

vous pouvez également paramétrer la propriété keyboard à false car cela empêche la fermeture du modal en appuyant sur la touche Esc sur le clavier.

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

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

305
répondu Nirmal 2014-08-09 07:42:12

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
répondu Varun Chatterji 2013-01-09 03:34:08

Si vous avez déjà initialisé la fenêtre modale, alors 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
répondu AymKdn 2017-07-29 18:47:48

outrepasse L'événement Bootstrap ‘hide’ de Dialog et arrête son comportement par défaut (pour disposer de la boîte de dialogue).

s'il vous Plaît voir ci-dessous l'extrait de code:

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

       e.preventDefault();
   });

ça marche très bien dans notre cas.

33
répondu Sam Jha 2017-07-29 18:58:56

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">
29
répondu Satish Singh 2017-07-29 18:59:42

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, le with de JavaScript 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 la prochaine fois le modal est ouvert.

22
répondu Chris Barr 2017-07-29 18:49:22

il suffit d'ajouter ces deux choses

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

, Il ressemblera à ceci 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 désactivera le bouton d'échappement et aussi le clic n'importe où et se cacher.

12
répondu Vivek 2014-05-16 17:55:38

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

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});
11
répondu Eric B 2014-09-30 20:05:26

comme dit D3VELOPPER, le code suivant résout cela:

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

j'utilise à la fois jquery & bootstrap et tout simplement removeData('modal') ne fonctionne pas.

6
répondu Morgan RotaStabelli 2015-09-16 09:01:14

le mieux que j'ai trouvé est d'ajouter ce code au lien

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>
4
répondu user3634719 2017-03-02 19:00:30

dans le cas où quelqu'un vient de Google pour essayer de comprendre comment empêcher quelqu'un de fermer un modal, n'oubliez pas qu'il y a aussi un bouton Fermer en haut à droite du modal qui doit être supprimé.

j'ai utilisé quelques CSS pour le cacher:

#Modal .modal-header button.close {
    visibility: hidden;
}

notez que l'utilisation de" display: none; " est écrasée lorsque le modal est créé, donc ne l'utilisez pas.

2
répondu Drew 2014-05-02 15:27:15

si vous voulez désactiver conditionnellement la fonctionnalité backdrop click closing . Vous pouvez utiliser la ligne suivante pour définir l'option backdrop à static pendant l'exécution.

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

cela empêchera un modèle déjà instancié avec backdrop option définie à false ( la valeur par défaut le comportement ), à compter de la clôture.

2
répondu Mohd Abdul Mujib 2016-11-18 15:30:53

vous pouvez définir le comportement par défaut du popup modal en utilisant la ligne de code ci-dessous:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
2
répondu haresh hanat 2017-02-16 08:11:17

faire cela est très facile de nos jours. Il suffit d'ajouter:

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

dans votre diviseur modal.

2
répondu jfindley 2017-03-02 19:00:15

Eh bien, c'est une autre solution que certains d'entre vous pourraient être à la recherche (comme je l'étais..)

mon problème était similaire, la boîte modale se fermait alors que l'iframe que j'avais à l'intérieur était chargée, donc j'ai dû désactiver le renvoi modal jusqu'à ce que L'Iframe finisse le chargement, puis re-activer.

les solutions présentées ici ne fonctionnaient pas à 100%.

ma solution était celle-ci:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

donc je Temporairement empêcher le Modal de se refermer avec:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

mais avec le Var is_loading qui va réactiver la fermeture après le chargement de L'Iframe.

1
répondu miguelmpn 2015-04-13 14:01:43
<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>
1
répondu shiva krishna 2017-07-06 09:49:38

pour mettre à jour l'état de toile de fond dans Bootstrap 4.1.3 après L'affichage modal, nous avons utilisé la ligne suivante de Bootstrap-Modal-Wrapper plugin. référence de code de dépôt de Plugin .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");
0
répondu mohamed sulibi 2018-09-04 19:04:26