Interdire la fermeture de la fenêtre modale Twitter Bootstrap


549

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?


1
Vous pouvez avoir une raison parfaitement valable de le faire (et il y en a probablement beaucoup d'autres). Cependant, il convient de noter qu'en général, les considérations UX déconseillent cela - la plupart des utilisateurs s'attendent à ce que le fait de cliquer sur un modal amène le contenu "ci-dessous" au "front".
Trevor

32
@Trevor C'est comme l'opposé du modal .
Rawling le

11
que faire si, s'il y a une page en arrière-plan qui ne peut être activée que si l'utilisateur se connecte en premier. En cliquant sur le bouton Ok modal, l'utilisateur sera redirigé vers la page de connexion. Si l'utilisateur peut simplement cliquer, cela signifie qu'il saute la page de connexion et accède simplement à la page sans connexion. All Hell Break Loose
cavalier rbk

5
@Trevor Je ne vois aucune preuve à l'appui de votre demande.
1252748

La fonctionnalité est judicieuse dans un scénario où l'utilisateur doit remplir de nombreux champs de formulaire dans le modal. Si l'utilisateur clique accidentellement en dehors du modal, tous les détails entrés seront perdus; il faudrait ensuite réactiver le modal et remplir les champs. Cette caractéristique éviterait une telle irritation.
mickmackusa

Réponses:


692

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

7
@ user1296175 Quel a été votre code final pour y parvenir? Je veux faire la même chose.
AlphaMale

4
Merci @nobita, ajouter data-backdrop = "statique" fait l'affaire! Le document d'amorçage Twitter est médiocre :(
Blue Smith

2
Vérifiez la réponse de @@ Varun Chatterji et incluez-la dans votre définition modale
Leandro

1
désactiver le clic extérieur pour tous les modaux avec une seule ligne de js: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'static';
Lukas Liesis

1
Pour les utilisateurs angulaires: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', contrôleur: 'modalController', toile de fond: 'static',});
Alexandr

310

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.


6
Oui, c'est la réponse la plus claire et la plus simple (car elle évite d'ajouter des attributs de données). Pour référence, backdropet keyboardsont mentionnés ici dans leur documentation sous la section Options .
Jesse Dupuy

Les attributs de données doivent-ils être évités? Veuillez guider à ce sujet.

@GopalAggarwal: dépend de la façon dont vous configurez le modal. Si vous associez un modal à plusieurs balises d'ancrage, l'utilisation d'attributs de données peut avoir un sens. Mais quand il n'y a qu'un seul modal par balise, j'irais avec les paramètres de script où chaque comportement est visible au même endroit.
Nirmal

7
Aussi pour éviter l'affichage modal passer immédiatement en show: false
ClearCloud8

214

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

4
Oui, c'est la réponse la plus propre et la plus simple (car elle fonctionne en ajoutant des attributs de données). Pour référence, toile de fond et clavier sont mentionnés ici dans leur documentation sous la section Options.
floww

Si vous lancez modal au chargement de la page, c'est le meilleur moyen de supprimer les autres options de fermeture.
santa

46

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.


1
Cela m'a aidé. Après avoir défini la «toile de fond:« statique »», l'utilisateur peut toujours fermer le modal en un clic; semblait être un bug, mais cela a fait l'affaire!
Omar

7
Pour l'instant: $ ('# modal'). RemoveData ('bs.modal'). Modal ({toile de fond: 'statique', clavier: faux});
D3VELOPER

34

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.


2
alors, comment le retourner?
sertaconay

3
Tout simplement élégant. thx :) Et @sertaconay crée juste une variable booléenne (par exemple) qui sera vérifiée pour décider si vous voulez empêcher la valeur par défaut
Nimrod Yonatan Ben-Nes

1
seule option ici qui a fonctionné après l'ouverture d'un modal
ask_io

2
C'est une solution parfaite si vous voulez avoir un contrôle plus fin sur le moment où les modaux peuvent être fermés et quand ils ne le sont pas.
Curos

33

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

C'est parfait pour un cas où le modal est déclaré en html, et ouvert uniquement via javascript - c'est-à-dire qu'il n'y a pas de lien vers celui-ci. Merci!
hgolov

22

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.


stackoverflow.com/questions/16030448/… Mais je n'aime pas cette solution
Victor

14

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.


Ces conseils ont été fournis des années auparavant.
mickmackusa

11

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

6

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.


4

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>

2

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.


Ne pouvez-vous pas également simplement supprimer le bouton de l'en-tête modal?
foop

Parfois, il est avantageux d'utiliser CSS au lieu de modifier le code HTML.
Drew

2

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.


2

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

comme +1 cette méthode, je ne veux pas cette option pour tous les modaux.
tsohr

2

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

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

Dans votre séparateur modal.


Ce conseil a été donné des années plus tôt sur cette même page.
mickmackusa

1

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.


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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.