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?

javascript css twitter-bootstrap modal-dialog Intellectuel
la 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

Copie possible de Empêcher Bootstrap Modal de disparaître en cliquant à l'extérieur ou en appuyant sur Échap?

tm

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

@Doguita: Ici: stackoverflow.com/questions/33000898/…

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

99

Vous pouvez utiliser un attribut comme celui-ci: 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 la fermeture de la fenêtre modale de bootstrap twitter

Antonis Grigoriadis
la source

<div id = "modal" class = "modal hide fade in" data-keyboard = "false" data-backdrop = "static"> c'est la meilleure réponse.

Kamlesh

34

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

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

ಅನಿಲ್
la 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
la 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.

en utilisant javascript

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

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

3

Essaye ça:

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

Vijay Chauhan
la source

Cela a fonctionné pour moi merci .....

Ajay Kumar

1

TLDR

backdrop: 'static'

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

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

Geoffrey Hale
la source

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

"@ ng-bootstrap / ng-bootstrap": "^ 6.1.0",
"bootstrap": "^ 4.4.1",

Hamfri
la 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
la 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
la source

-2

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

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

Atul
la source

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

Réponses:

TLDR