web-dev-qa-db-fra.com

Désactiver le clic en dehors de la zone modale d'amorçage pour fermer le modal

Je suis en train de créer un site Web bootstrap, avec quelques "Modals" Bootstrap ... .. Je tente de personnaliser certaines des fonctionnalités par défaut.

Le problème est le suivant: Vous pouvez fermer le modal en cliquant sur l’arrière-plan . Est-il possible de désactiver cette fonctionnalité? Sur des modaux spécifques uniquement?

Page modale Bootstrap

javascriptcsstwitter-bootstrapmodal-dialog
317
Egghead

Dans le chapitre Options, sur la page que vous avez liée, vous pouvez voir l’option backdropname__. Passer cette option avec la valeur 'static' empêchera la fermeture du modal.
Comme @PedroVagner a souligné les commentaires, vous pouvez également passer {keyboard: false} pour empêcher la fermeture du modal en appuyant sur Esc.

Si vous ouvrez le modal par js, utilisez:

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

Si vous utilisez des attributs de données, utilisez:

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
755
Doguita

Vous pouvez utiliser un attribut comme ceci: data-backdrop="static" ou avec javascript: 

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

Voir aussi cette réponse: Empêcher la fermeture de la fenêtre modale d'amorçage Twitter

93
Antonis Grigoriadis

C'est le plus facile

Vous pouvez définir votre comportement modal, en définissant Data-Keyboard et Data-Backdrop.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
79
Sushan

Dans mon application, j'utilise le code ci-dessous pour afficher Bootstrap modal via jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
30
ಅನಿಲ್

Vous pouvez utiliser

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

pour changer le comportement par défaut.

26
David Navarro Astudillo

Il existe deux façons de désactiver le clic en dehors de la zone du modèle bootstrap pour fermer les modali-

  1. en utilisant javascript 

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

  2. utilisation d'un attribut de données dans une balise HTML 

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
7
Gaurav Tripathi

Regarde ça ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>

6
Sachin Sanchaniya

La solution qui fonctionne pour moi est la suivante: 

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

toile de fond: désactivé l'événement clic extérieur

clavier: désactivé l'événement mot clé scape

2
Jorge Santos Neill

Une autre option si vous ne savez pas si le modal a déjà été ouvert ou pas encore et que vous devez configurer les options modales:

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}
1
Cava

Essaye ça:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
0
Vijay Chauhan
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

essayez ceci, Pendant le développement de mes applications ... J'ai également rencontré le problème que les valeurs par défaut d'un attribut de modèle => data-keyboard = "true", => data-backdrop = "non static" j'espère que cela vous aidera

0
Deepalakshmi

TLDR

backdrop: 'static'

https://getbootstrap.com/docs/3.3/javascript/#modals-options

spécifiez static pour un fond qui ne ferme pas le modal au clic.

0
Geoffrey Hale

aucune de ces solutions n'a fonctionné pour moi.

J'ai un modal termes et conditions que je voulais forcer les gens à revoir avant de continuer ... les valeurs par défaut "statique" et "clavier" selon les options rend impossible de faire défiler la page car les termes et conditions sont quelques pages log, statique n'était pas la réponse pour moi.

Donc, au lieu de cela, je suis allé à délier la méthode du clic sur le modal, avec ce qui suit, j'ai pu obtenir l'effet souhaité.

$('.modal').off('click');

0
RGB
You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
    jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})
0
sonu pokade