Non consentire la chiusura della finestra modale Bootstrap di Twitter

Sto creando una finestra modale utilizzando Twitter Bootstrap. Il comportamento predefinito è se si fa clic al di fuori dell'area modale, il modale si chiuderà automaticamente. Vorrei disabilitarlo, ovvero non chiudere la finestra modale quando si fa clic al di fuori del modale.

Qualcuno può condividere il codice jQuery per fare questo?

Credo che tu voglia impostare il valore di sfondo su statico . Se si desidera evitare che la finestra si chiuda quando si utilizza la Escchiave, è necessario impostare un altro valore.

Esempio:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

OPPURE se stai utilizzando JavaScript:

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

Basta impostare la backdropproprietà su 'static'.

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

Puoi anche impostare la keyboardproprietà su falseperché ciò impedisce la chiusura del modale premendo il Esctasto sulla tastiera.

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

myModal è l'ID del div che contiene il tuo contenuto modale.

Puoi anche includere questi attributi nella definizione modale stessa:

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

Se hai già inizializzato la finestra modale, potresti voler ripristinare le opzioni con $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})per assicurarti che applicheranno le nuove opzioni.

Sostituisci l'evento 'hide' di Bootstrap di Dialog e interrompe il suo comportamento predefinito (per eliminare la finestra di dialogo).

Consulta lo snippet di codice seguente:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

Funziona bene nel nostro caso.

Sì, puoi farlo in questo modo:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Un po 'come la risposta di @AymKdn, ma questo ti permetterà di cambiare le opzioni senza reinizializzare il modale.

$('#myModal').data('modal').options.keyboard = false;

O se hai bisogno di fare più opzioni, JavaScript è withutile qui!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

Se il modale è già aperto, queste opzioni avranno effetto solo alla successiva apertura del modale.

Aggiungi solo queste due cose

data-backdrop="static" 
data-keyboard="false"

Ora sembrerà così

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

Disabiliterà il pulsante di escape e anche il clic ovunque e si nasconderà.

Puoi disabilitare il comportamento click-to-close dello sfondo e impostarlo come predefinito per tutte le modali aggiungendo questo JavaScript alla tua pagina (assicurati che venga eseguito dopo il caricamento di jQuery e Bootstrap JS):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

Come dice D3VELOPER, il codice seguente lo risolve:

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

Sto usando sia jquery che bootstrap e semplicemente removeData('modal')non funziona.

Il migliore che ho trovato è aggiungere questo codice al link

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

Nel caso in cui qualcuno venga da Google cercando di capire come impedire a qualcuno di chiudere un modale, non dimenticare che c'è anche un pulsante di chiusura in alto a destra del modale che deve essere rimosso.

Ho usato alcuni CSS per nasconderlo:

#Modal .modal-header button.close {
    visibility: hidden;
}

Si noti che utilizzando "display: none;" viene sovrascritto quando viene creato il modale, quindi non usarlo.

Se si desidera disabilitare condizionalmente la backdrop click closingfunzione. È possibile utilizzare la seguente riga per impostare l' backdropopzione su staticdurante il runtime.

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

Ciò impedirà la chiusura di un modello già istanziato con l' backdropopzione impostata su false( comportamento predefinito ).

È possibile impostare il comportamento predefinito del popup modale utilizzando la seguente riga di codice:

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

Oggi è molto semplice. Aggiungi solo:

data-backdrop="static" data-keyboard="false" 

Nel tuo divisore modale.

Bene, questa è un'altra soluzione che alcuni di voi ragazzi potrebbero cercare (come lo ero io ..)

Il mio problema era simile, la finestra modale si stava chiudendo mentre l'iframe che avevo dentro si stava caricando, quindi ho dovuto disabilitare il rifiuto modale fino a quando l'Iframe non ha terminato il caricamento, quindi riattivare.

Le soluzioni qui presentate non funzionavano al 100%.

La mia soluzione era questa:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

Quindi prevengo temporaneamente la chiusura del Modale con:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

Ma con var is_loading che riattiverà la chiusura dopo il caricamento dell'Iframe.

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

Per aggiornare lo stato di sfondo in Bootstrap 4.1.3 dopo che il modale è stato visualizzato, abbiamo utilizzato la seguente riga dal plug -in Bootstrap-Modal-Wrapper . Riferimento al codice del repository plug-in .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");