Disabilita il clic all'esterno dell'area modale bootstrap per chiudere modale

441

Sto realizzando un sito Web bootstrap, con un paio di 'Modals' Bootstrap. Sto cercando di personalizzare alcune delle funzionalità predefinite.

Il problema è questo; Puoi chiudere il modale facendo clic sullo sfondo. Esiste un modo per disabilitare questa funzione? Solo su modali specifici?

Pagina modale Bootstrap

javascript  css  twitter-bootstrap  modal-dialog 
— intellettuale
fonte
puoi per favore dirmi quale evento è chiamato in questa situazione. $ scope.ok, $ scope. $ licenziamento Ho un attrezzo per l'invio e l'interruzione ma non conosco l'evento generato in questa situazione.
— LoveToCode
4
— tm

Risposte:

913

Nel capitolo Opzioni, nella pagina che hai collegato, puoi vedere l' backdropopzione. Passare questa opzione con valore 'static'impedirà la chiusura del modale.
Come @PedroVagner ha sottolineato i commenti, puoi anche passare {keyboard: false}per impedire la chiusura del modale premendo Esc.

Se apri il modale con js usa: 

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

Se si utilizzano attributi di dati, utilizzare: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
— Doguita
fonte
c'è un modo per mantenere lo sfondo in grado di registrare i clic per altri controlli ma semplicemente non chiudere le modali?
— vivekanon,
2
@mystikacid Dovresti fare una nuova domanda per questo. Sarà meglio aiutarti con il tuo problema e altri utenti che cercano una soluzione simile.
— Doguita,
— vivekanon
3
Ha avuto un problema semplice ma irritante, assicurati di posizionare la linea jquery prima di $('#modal').modal('show');sperare che questo ti aiuti!
— Cwiggo,
3
cwiggo non usi modal $ ('# modal'). modal ('show'); - usi semplicemente .modal ({sfondo: 'statico', tastiera: falso}) - senza alcun comando show o toggle
— TV-C-15
136

Questo è il più semplice

Puoi definire il tuo comportamento modale, definendo la tastiera e lo sfondo dei dati.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
fonte
2
Questa è l'unica cosa che ha funzionato per me. Passare direttamente alle opzioni in JS non ha funzionato per me per qualche motivo (versione 3.3.7). Se qualcun altro conferma, potrei aprire un problema con il team Bootstrap.
— Dchacke,
Inizialmente, usare la versione js non ha funzionato anche per me perché stavo impostando tutto dopo aver aperto il modale. Dovresti fare questo "$ ('# modalForm'). Modal ({sfondo: 'statico', tastiera: falso});" prima di questo "$ ('# modalForm'). modal ('show');". Ma per me, la risposta migliore è di @ ಅನಿಲ್
— Lucas,
Questo ha funzionato per me. Mettere l' data-backdrop="static"opzione sulla definizione modale, non il pulsante di attivazione che apre il modale come specificato in altre risposte, ha funzionato per me.
— TSmith,
34

Nella mia applicazione, sto usando il pezzo di codice seguente per mostrare Bootstrap modale tramite jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
fonte
Questa è una buona risposta perché questo codice funzionerà solo quando modale è aperto.
— Deepak Dholiyan,
32

Puoi usare

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

per modificare il comportamento predefinito.

— David Navarro Astudillo
fonte
Ottima risposta, in quanto gestisce la situazione per tutti i modali.
— Haris ur Rehman,
1
In bootstrap v4, la sintassi è: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'statico';
— Garry English
11

Esistono due modi per disabilitare il clic all'esterno dell'area del modello bootstrap per chiudere modale-

  1. usando javascript

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

  2. utilizzando l'attributo data nel tag HTML

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

Controlla questo ::

$(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>
Espandi frammento

— Sachin Sanchaniya
fonte
6

Un'altra opzione se non sai se il modale è già stato aperto o meno e devi configurare le opzioni modali:

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

Cambia le opzioni in _config

— Cava
fonte
per Bootstrap 4 + dovrebbe essere _setEscapeEvent()invece di .escape()?
— Ivan Bacher,
@IvanBacher Funziona con me usando .escape ()
— Cava il
5

La soluzione che funziona per me è la seguente: 

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

fondale: disabilitato l'evento click esterno

tastiera: disabilitato l'evento della parola chiave scape

— Jorge Santos Neill
fonte
4 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

prova questo, Durante lo sviluppo della mia applicazione ... Ho anche riscontrato il problema che i valori predefiniti per un attributo del modello => data-keyboard="true", =>data-backdrop="non static"

Spero che questo ti possa aiutare!

— Deepalakshmi
fonte
3

Prova questo:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
— Vijay Chauhan
fonte
Questo ha funzionato per me grazie .....
— Ajay Kumar il
1

nessuna di queste soluzioni ha funzionato per me.

Ho dei termini e condizioni modali che volevo costringere le persone a rivedere prima di continuare ... i valori predefiniti "statici" e "tastiera" secondo le opzioni rendevano impossibile scorrere la pagina in quanto i termini e le condizioni sono poche pagine log, static non era la risposta per me.

Quindi invece sono andato a sciogliere il metodo click sul modale, con il seguente sono stato in grado di ottenere l'effetto desiderato.

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

— RGB
fonte
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 Pokok
fonte
0

Se si utilizza @ ng-bootstrap, utilizzare quanto segue:

Componente

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

Modello

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

Questo codice è stato testato su Angular 9 usando:

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

  2. "bootstrap": "^ 4.4.1",

— Hamfri
fonte
0

Usalo se vuoi disabilitare il click esterno per tutte le modali usando jQuery. Aggiungi questo script al tuo Javascript dopo jQuery.

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

Puoi anche farlo senza usare JQuery, in questo modo:

<div id="myModal">

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

Aggiungi i css sottostanti secondo la larghezza dello schermo desiderata.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.