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