web-dev-qa-db-fra.com

Désactiver la fenêtre modale Twitter Bootstrap à partir de la fermeture

Je crée une fenêtre modale à l'aide de 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 fermez pas la fenêtre modale lorsque vous cliquez en dehors du modal.

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

jquerytwitter-bootstrapmodal-dialogmouseclick-event
520
user1296175

Je crois que vous voulez définir le valeur d'arrière-plan à statique. Si vous voulez éviter que la fenêtre se ferme lorsque vous utilisez le 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
});
675
Nobita

Définissez simplement la propriété backdrop sur 'static'.

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

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

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

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

309
Nirmal

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">
209
Varun Chatterji

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 que les nouvelles options seront appliquées.

46
AymKdn

Remplacez l’événement «masquer» Bootstrap de la boîte de dialogue et arrêtez son comportement par défaut (pour supprimer la boîte de dialogue).

S'il vous plaît voir l'extrait de code ci-dessous:

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

       e.preventDefault();
   });

Cela fonctionne bien dans notre cas.

33
Sam Jha

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">
31
Satish Singh

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 plusieurs options, la 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 lorsque la prochaine fois le modal est ouvert.

22
Chris Barr

Il suffit d'ajouter 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 se cacher.

12
Vivek

Vous pouvez désactiver le comportement de fermeture par clic 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';
});
11
Eric B

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

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

J'utilise jquery & bootstrap et simplement removeData('modal') ne fonctionne pas.

6
Morgan RotaStabelli

Le meilleur 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
user3634719

Si quelqu'un venant de Google tente de trouver un moyen d'empêcher quelqu'un de fermer un modal, n'oubliez pas qu'un bouton de fermeture doit également être supprimé en haut à droite du modal.

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éé, ne l'utilisez pas.

2
Drew

Si vous souhaitez désactiver de manière conditionnelle la fonctionnalité backdrop click closing. Vous pouvez utiliser la ligne suivante pour définir l'option backdrop sur 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 l'option backdrop définie sur false (le comportement par défaut) de se fermer.

2
Mohd Abdul Mujib

Vous pouvez définir le comportement par défaut du popup modal en utilisant l'une des lignes de code ci-dessous:

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

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

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

Dans votre diviseur modal.

2
jfindley
<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
shiva krishna

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

Mon problème était similaire, la boîte modale se fermait pendant le chargement de l'iframe. J'ai donc dû désactiver le renvoi modal jusqu'à la fin du chargement de l'Iframe, puis le 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;
     });
}};

Donc, j'empêche temporairement le Modal de fermer avec:

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

Mais c'est la var is_loading qui autorisera la fermeture après le chargement de l'Iframe.

1
miguelmpn

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 de Bootstrap-Modal-Wrapper plugin. Référence du code du référentiel de plugin .

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