Interdire la fermeture de la fenêtre modale Twitter Bootstrap

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 vous cliquez en dehors du modal.

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

Je pense que vous souhaitez définir la valeur de fond sur statique . Si vous souhaitez éviter la fermeture de la fenêtre lors de l'utilisation de la Escclé, 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
});

Définissez simplement la backdroppropriété sur 'static'.

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

Vous pouvez également définir la keyboardpropriété sur falsecar cela empêche la fermeture du modal en appuyant sur la Esctouche du clavier.

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

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

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">

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

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

Veuillez consulter l'extrait de code ci-dessous:

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

       e.preventDefault();
   });

Cela fonctionne bien dans notre cas.

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">

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 devez faire plusieurs options, JavaScript withest utile ici!

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

Si le modal est déjà ouvert, ces options ne prendront effet qu'à la prochaine ouverture du modal.

Ajoutez simplement ces deux choses

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

Cela 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 également le clic n'importe où et se cachera.

Vous pouvez désactiver le comportement de clic pour fermer de l'arrière-plan et en faire la valeur par défaut pour tous vos modaux 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';
});

Comme le dit D3VELOPER, le code suivant le résout:

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

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

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>

Au cas où quelqu'un viendrait ici de Google essayant de comprendre comment empêcher quelqu'un de fermer un modal, n'oubliez pas qu'il y a aussi un bouton de fermeture en haut à droite du modal qui doit être supprimé.

J'ai utilisé du CSS pour le cacher:

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

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

Si vous souhaitez désactiver conditionnellement la backdrop click closingfonctionnalité. Vous pouvez utiliser la ligne suivante pour définir l' backdropoption staticpendant 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 l' backdropoption définie sur false( le comportement par défaut ) de se fermer.

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';

Faire cela est très facile de nos jours. Ajoutez simplement:

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

Dans votre séparateur modal.

Eh bien, c'est une autre solution que certains d'entre vous pourraient rechercher (comme je l'étais ..)

Mon problème était similaire, la boîte modale se fermait pendant le chargement de l'iframe que j'avais à l'intérieur, j'ai donc dû désactiver la suppression modale jusqu'à ce que l'iframe termine le chargement, puis réactiver.

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

Ma solution était la suivante:

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;
     });
}};

J'empêche donc temporairement le Modal de se fermer avec:

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

Mais avec la var is_loading qui réactivera la fermeture après le chargement de l'Iframe.

<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>

Pour mettre à jour l'état de la toile de fond dans Bootstrap 4.1.3 après l'affichage du modal, nous avons utilisé la ligne suivante du plugin Bootstrap-Modal-Wrapper . Référence du code du référentiel de plugins .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");