Yocker
  1. Yocker
  3. Disabilitare il clic al di fuori dell’area di boot modale per chiudere la modal
Intereting Posts
La dimensione di (enum) == sizeof (int), sempre? Carica gli indicatori di avanzamento per il recupero? Qual è la differenza tra Google App Engine e Google Compute Engine? Come convertire un object in un array di byte in C # controlla se la funzione “è un numero” in Oracle Come impedire lo SPAM senza CAPTCHA o un sistema gestito centralmente (es. Akismet) Ottieni un IDataReader da un elenco digitato Qual è il metodo migliore per ridurre le dimensioni dei miei file Javascript e CSS? Come accedere / aggiornare $ rootScope da fuori Angular Qual è la differenza tra ASP.NET 5, .NET Core e ASP.NET Core 5? Usare le variabili all’interno di un heredoc bash json.stringify non elabora i metodi dell’object Vantaggi degli alberi di ricerca binaria su tabelle hash Come sapere che l’utente ha cliccato su “X” o sul pulsante “Chiudi”? Perché posso cambiare una variabile const locale tramite il cast del puntatore, ma non quella globale in C?

Disabilitare il clic al di fuori dell’area di boot modale per chiudere la modal

Sto creando un sito web di bootstrap, con un paio di “modal” Bootstrap. Sto cercando di personalizzare alcune delle funzionalità predefinite.

Il problema è questo; È ansible chiudere la modale facendo clic sullo sfondo. È comunque necessario disabilitare questa funzione? Solo su modali specifici?

Bootstrap modal page

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

Se apri il modal da js usa: 

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

Se si stanno utilizzando gli attributi dei dati, utilizzare: 

  `

Puoi usare un attributo come questo: data-backdrop="static" o con javascript: 

 $('#myModal').modal({ backdrop: 'static', keyboard: false // to prevent closing with Esc button (if you want this too) })

Vedi anche questa risposta: non consentire la chiusura della finestra modale di bootstrap di Twitter

Questo è il più semplice

È ansible definire il comportamento modale, definendo tastiera dati e sfondo dati.

Nella mia applicazione, sto usando il codice sottostante per mostrare modal Bootstrap tramite jQuery. 

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

Puoi usare 

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

per cambiare il comportamento predefinito.

Controlla questo :: 

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

Esistono due modi per distriggersre il clic al di fuori dell’area del modello di bootstrap per chiudere modal-

  1. usando javascript 

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

  2. utilizzando l’attributo di dati nel tag HTML 

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

Un’altra opzione se non sai se la modale è già stata aperta o non ancora e devi configurare le opzioni modali: 

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

Aggiungi il css sotto come vuoi la larghezza dello schermo. 

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

Puoi anche farlo senza usare JQuery, in questo modo: 

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

La soluzione che funziona per me è la seguente: 

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

sfondo: disabilitato l’evento click esterno

tastiera: disabilitato l’evento keyword scape