Désactiver le clic à l'extérieur de la zone modale de bootstrap pour fermer la zone modale

je suis en train de faire un site Web de bootstrap, avec quelques "Modals" de Bootstrap. J'essaie de personnaliser certaines des fonctionnalités par défaut.

problème:; Vous pouvez fermer le modal en cliquant sur le fond. Est-il de toute façon pour désactiver cette fonction? Pour certains modaux?

Bootstrap modal page

284
demandé sur Rohan Gada 2014-03-05 23:31:12

12 réponses

sur le chapitre Options, dans la page que vous avez liée, vous pouvez voir l'option backdrop . Passer cette option avec la valeur 'static' empêchera de fermer le modal.

Comme @PedroVagner l'a souligné sur 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 utiliser: 

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

Si vous utilisez des attributs de données, l'utilisation: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
628
répondu Doguita 2015-08-06 19:42:43

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: interdire Twitter bootstrap modal window de fermer

89
répondu Antonis Grigoriadis 2017-05-23 12:10:47

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">
72
répondu Sushan 2015-06-05 04:37:22

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

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
30
répondu ಅನಿಲ್ 2016-10-12 06:48:24

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.

21
répondu David Navarro Astudillo 2017-05-09 17:22:37

Check-Out Ceci:: 

$(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
répondu Sachin Sanchaniya 2016-11-26 04:43:01

il y a deux façons de désactiver le clic à l'extérieur de la zone modèle de bootstrap pour fermer modal -

  1. en utilisant javascript 

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

  2. utilisant l'attribut de données dans la balise HTML 

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
6
répondu Gaurav Tripathi 2017-05-21 19:48:16

une autre option si vous ne savez pas si le modal a déjà été ouvert ou pas encore et 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
    }
}
0
répondu Cava 2018-02-24 04:49:26

ajoutez les css ci-dessous selon la largeur de votre écran. 

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
0
répondu Atul 2018-04-12 06:06:58

vous pouvez également le faire sans utiliser JQuery, comme ceci: 

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
0
répondu Sirar Salih 2018-05-16 10:22:33

La solution qui fonctionne pour moi est la suivante: 

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

toile de fond: désactivé l'événement click outside

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

0
répondu Jorge Santos Neill 2018-07-18 21:42:57

pour moi il y avait une confusion entre bootstrap modal et jQuery modal. Cela a fait le tour (pour jQuery modal ) 

 $("#sticky").modal({
  escapeClose: false,
  clickClose: false,
  showClose: false
});
0
répondu Anders 2018-09-14 16:42:16