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

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.

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

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.

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

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.

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

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.

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>

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.

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.

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

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

dans votre diviseur modal.

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.

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