css - Désactiver, cliquez à l'extérieur de bootstrap modal de la zone de fermer la modale

817

Sur les Options de chapitre, dans la page que vous avez lié, vous pouvez voir l' backdrop option. En passant cette option à la valeur 'static' empêchera de fermer la modale.

Comme @PedroVagner pointé sur les commentaires, vous pouvez également transmettre des {keyboard: false} pour éviter de fermer la modale en appuyant sur Esc.

Si vous l'ouverture de l'modal par js utilisation:
```
$('#myModal').modal({backdrop: 'static', keyboard: false})  
```
Si vous utilisez des attributs de données, utilisation:
```
 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
```
- est-il un moyen de garder le fond en mesure d'enregistrer les clics pour les autres commandes, mais juste de ne pas fermer les auxiliaires modaux ?
- Vous devez poser une nouvelle question pour que. Il sera mieux pour vous aider avec votre problème et à d'autres utilisateurs à la recherche d'une solution similaire.
- Ici : stackoverflow.com/questions/33000898/...
- A une solution simple mais irritant problème, assurez-vous de placer le jquery ligne avant $('#modal').modal('show'); Espérons que cette aide!
- cwiggo vous n'utilisez pas modale $('#modal').modal('show'); - il suffit d'utiliser .modal({fond: "statiques", clavier: false}) - sans tout montrer ou passer commande
- jsfiddle.net/bw2xc1w3
- Bravo!!! Ça fonctionne, tant mieux, merci 🙂
- Bootstrap 3 documentation avec ces options: getbootstrap.com/docs/3.4/javascript/#modals-options
InformationsquelleAutor Doguita
107

C'est le plus facile

Vous pouvez définir votre comportement modal, définition des données-clavier des données et de la toile de fond.
```
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
```
- C'est la seule chose qui a fonctionné pour moi. De passage dans les options de JS directement n'a pas fonctionné pour moi pour une raison quelconque (version 3.3.7). Si quelqu'un d'autre confirme, je pourrais ouvrir un problème avec le Bootstrap de l'équipe.
- Au premier abord, à l'aide de js version ne fonctionne pas pour moi aussi parce que j'étais à la mise en après j'ai ouvert le modal. Vous devez faire cela "$('#modalForm').modal({ fond: "statiques", clavier: false });" avant cette "$('#modalForm').modal('show');". Mais pour moi, la meilleure réponse est de @ಅನಿಲ್
- Cela a fonctionné pour moi. Mettre le data-backdrop="static" option sur le modèle de définition, de ne pas le bouton de déclenchement qui ouvre le modal, comme spécifié dans les autres réponses, a travaillé pour moi.
- Vous avez sauvé ma vie seconde fois 🙂
InformationsquelleAutor Sushan
99

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 cette réponse trop: Interdire twitter bootstrap fenêtre modale de la fermeture
- <div id="modal" class="modal cacher fondu en ouverture" des données-clavier="false" data-toile de fond="statique"> c'est la meilleure réponse.
InformationsquelleAutor Antonis Grigoriadis

Dans ma demande, je suis en utilisant le morceau de code ci-dessous pour afficher modal Bootstrap via jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });

C'est une bonne réponse, car ce code ne fonctionne que quand modal est ouvert.

InformationsquelleAutor ಅನಿಲ್

28

Vous pouvez utiliser
```
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;
```
pour modifier le comportement par défaut.
- Super réponse, puisqu'elle gère la situation de tous les auxiliaires modaux.
InformationsquelleAutor David Navarro Astudillo
9

Il y a deux façons de le désactiver, cliquez à l'extérieur de bootstrap modèle de la zone de fermer la modale
1. à l'aide de javascript
```
$('#myModal').modal({
   backdrop: 'static',
   keyboard: false
});
```
2. à l'aide des données de l'attribut dans la balise HTML
```
data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
```
InformationsquelleAutor Gaurav Tripathi

Caisse ::

JS:

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});

HTML:

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

InformationsquelleAutor Sachin Sanchaniya

5

La solution qui fonctionne pour moi est la suivante:
```
$('#myModal').modal({backdrop: 'static', keyboard: false})  
```
toile de fond: désactivé le clic à l'extérieur de l'événement

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

InformationsquelleAutor 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 avez besoin pour configurer les options modales:

Bootstrap 3.4

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

Bootstrap 4.3+

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')._config.keyboard = keyboard;
    $modal.data('bs.modal')._config.backdrop = backdrop;

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

Modifier les options de _config

pour Bootstrap 4 + devrait-il être _setEscapeEvent() au lieu de .escape()?
L'œuvre m'aide .escape()

InformationsquelleAutor Cava

2
```
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
```
essayer,au Cours de mon développement d'applications ...j'ai aussi rencontré le problème que les valeurs par défaut pour un attribut du modèle =>data-clavier="true",
=>data-toile de fond="non statique"
espérons que cela vous aidera

InformationsquelleAutor Deepalakshmi

Essayez ceci:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>

InformationsquelleAutor Vijay Chauhan

0

TLDR

backdrop: 'static'

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

spécifier static pour une toile de fond qui permet de ne pas fermer la modale sur cliquez sur.

InformationsquelleAutor Geoffrey Hale

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

InformationsquelleAutor sonu pokade

0

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

J'ai un termes et conditions modales que je voulais forcer les gens à examiner avant de continuer...les valeurs par défaut "statique" et "clavier", selon les options qu'il est impossible de faire défiler la page que les termes et conditions sont un peu les pages du journal, statique la réponse n'était pas pour moi.

Donc à la place je suis allé à séparer la méthode de clic sur le modal, avec le suivant, j'ai été en mesure d'obtenir l'effet désiré.

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

InformationsquelleAutor RGB

-1

Vous pouvez également le faire sans l'aide de JQuery, comme suit:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

InformationsquelleAutor Sirar Salih

-2

Ajouter le css ci-dessous selon que vous voulez que votre largeur de l'écran.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}

InformationsquelleAutor Atul

Vous devez vous connecter pour publier un commentaire.

TLDR