Désactiver le clic en dehors de la zone modale de bootstrap pour fermer le modal

441

Je fais un site Web de bootstrap, avec quelques 'Modals' de Bootstrap. J'essaie 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 les modaux spécifiques uniquement?

Page modale d'amorçage

javascript  css  twitter-bootstrap  modal-dialog 
— Intellectuel
source
pouvez-vous s'il vous plaît me dire quel événement est appelé dans cette situation. $ scope.ok, $ scope. $ disable J'ai implémenté pour soumettre et abandonner mais je ne connais pas l'événement déclenché dans cette situation.
— LoveToCode
4
— tm

Réponses:

914

Dans le chapitre Options, dans la page que vous avez liée, vous pouvez voir l' backdropoption. Passer cette option avec une valeur 'static'empêchera la fermeture du 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, 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>`
— Doguita
source
existe-t-il un moyen de garder l'arrière-plan capable d'enregistrer les clics pour d'autres contrôles, mais tout simplement pas de fermer les modaux?
— vivekanon
2
@mystikacid Vous devriez poser une nouvelle question à ce sujet. Il sera préférable de vous aider avec votre problème et les autres utilisateurs à la recherche d'une solution similaire.
— Doguita
— vivekanon
3
Vous avez eu un problème simple mais irritant, assurez-vous de placer la ligne jquery avant que $('#modal').modal('show');cela ne vous aide!
— cwiggo
3
cwiggo vous n'utilisez pas modal $ ('# modal'). modal ('show'); - vous utilisez simplement .modal ({backdrop: 'static', keyboard: false}) - sans aucune commande show ou toggle
— TV-C-15
136

C'est le plus simple

Vous pouvez définir votre comportement modal, en définissant le clavier de données et le fond de données.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
source
2
C'est la seule chose qui a fonctionné pour moi. Passer directement les options dans JS n'a tout simplement pas fonctionné pour moi pour une raison quelconque (version 3.3.7). Si quelqu'un d'autre corrobore, je pourrais ouvrir un problème avec l'équipe Bootstrap.
— dchacke
Au début, l'utilisation de la version js ne fonctionnait pas aussi pour moi car je réglais tout après avoir ouvert le modal. Vous devriez faire ceci "$ ('# modalForm'). Modal ({backdrop: 'static', keyboard: false});" avant ce "$ ('# modalForm'). modal ('show');". Mais pour moi, la meilleure réponse vient de @ ಅನಿಲ್
— Lucas
Cela a fonctionné pour moi. Mettre l' data-backdrop="static"option sur la définition modale, pas le bouton déclencheur qui ouvre le modal comme spécifié dans d'autres réponses, a fonctionné pour moi.
— TSmith
34

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

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
source
C'est une bonne réponse car ce code ne fonctionnera que lorsque le modal sera ouvert.
— Deepak Dholiyan
32

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.

— David Navarro Astudillo
source
Excellente réponse, car elle gère la situation pour tous les modaux.
— Haris ur Rehman
1
Dans bootstrap v4, la syntaxe est la suivante: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
— Garry English
11

Il existe deux façons de désactiver le clic en dehors de la zone du modèle d'amorçage pour fermer le module.

  1. en utilisant javascript

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

  2. en 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.
— Gaurav Tripathi
source
9

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>
Développer l'extrait

— Sachin Sanchaniya
source
6

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:

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

Changez les options en _config

— Cava
source
pour Bootstrap 4 + devrait-il être à la _setEscapeEvent()place de .escape()?
— Ivan Bacher
@IvanBacher Fonctionne pour moi en utilisant .escape ()
— Cava
5

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é l'événement de mot-clé scape

— Jorge Santos Neill
source
4 
<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 mon application ... j'ai également rencontré le problème que les valeurs par défaut pour un attribut de modèle => data-keyboard="true", =>data-backdrop="non static"

J'espère que cela vous aidera!

— Deepalakshmi
source
3

Essaye ça:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
— Vijay Chauhan
source
Cela a fonctionné pour moi merci .....
— Ajay Kumar
1

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

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

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

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

— RVB
source
0 
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.
})
— sonu pokade
source
0

Si vous utilisez @ ng-bootstrap, utilisez ce qui suit:

Composant

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {

  constructor(
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
  }

  openModal(exampleModal: any, $event: any) {
    this.ngbModal.open(exampleModal, {
      size: 'lg', // set modal size
      backdrop: 'static', // disable modal from closing on click outside
      keyboard: false, // disable modal closing by keyboard esc
    });
  }
}

Modèle

<div (click)="openModal(exampleModal, $event)"> </div>
    <ng-template #exampleModal let-modal>
        <div class="modal-header">
            <h5 class="modal-title">Test modal</h5>
        </div>
        <div class="modal-body p-3">
            <form action="">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Test field 1</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Test field 2</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="text-right pt-4">
                        <button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
                        <button class="btn btn-primary ml-1">Save</button>
                    </div>
            </form>
        </div>
    </ng-template>

Ce code a été testé sur angular 9 en utilisant:

  1. "@ ng-bootstrap / ng-bootstrap": "^ 6.1.0",

  2. "bootstrap": "^ 4.4.1",

— Hamfri
source
0

Utilisez-le si vous souhaitez désactiver le clic externe pour tous les modaux utilisant jQuery. Ajoutez ce script à votre Javascript après jQuery.

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});
— Sahan
source
-1

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

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
— Sirar Salih
source
-2

Ajoutez le css ci-dessous selon votre taille d'écran.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.