Non consentire la chiusura della finestra modale Bootstrap di Twitter


549

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?


1
Potresti avere un motivo perfettamente valido per farlo (e probabilmente ce ne sono molti altri). Tuttavia, vale la pena notare che, in generale, le considerazioni su UX sconsigliano questo: la maggior parte degli utenti si aspetta che facendo clic su un modale porti il ​​contenuto "sotto" in primo piano.
Trevor,

32
@Trevor È come l'opposto del modale .
Rawling,

11
cosa succede se, se c'è una pagina in background che può essere attivata solo se l'utente accede per primo. Facendo clic sul pulsante OK modale l'utente verrà reindirizzato alla pagina di accesso. Se l'utente può semplicemente fare clic, significa che l'utente salta la pagina di accesso e accede alla pagina senza effettuare l'accesso. All Hell Break Loose
jumper rbk

5
@Trevor Non vedo alcuna prova a supporto della tua richiesta.
1252748

La funzionalità è sensata in uno scenario in cui l'utente deve compilare molti campi modulo in modale. Se l'utente fa clic accidentalmente all'esterno del modale, tutti i dettagli inseriti andrebbero persi; quindi dovrebbero riattivare il modale e riempire i campi. Questa funzione eviterebbe tale irritazione.
Mickmackusa,

Risposte:


692

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

7
@ user1296175 Qual è stato il tuo codice finale per raggiungere questo obiettivo? Voglio fare lo stesso
AlphaMale

4
Grazie @nobita, aggiungi data-background = "statico" fa il trucco! Il documento bootstrap di Twitter è scarso :(
Blue Smith

2
Controlla la risposta di @@ Varun Chatterji e includila nella tua definizione modale
Leandro,

1
disabilita il clic esterno per tutte le modali con una sola riga di js: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'statico';
Lukas Liesis,

1
Per utenti angolari: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', controller: 'modalController', contesto: 'statico',});
Alexandr,

310

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.


6
Sì, questa è la risposta più pulita e semplice (poiché evita di aggiungere attributi di dati). Per riferimento, backdrope keyboardsono menzionati qui nella loro documentazione nella sezione Opzioni .
Jesse Dupuy,

Gli attributi dei dati sono qualcosa da evitare? Gentile guida su questo.

@GopalAggarwal: dipende da come si configura il modale. Se associ un modale a più tag di ancoraggio, potrebbe essere utile utilizzare gli attributi dei dati. Ma quando c'è solo un modale per tag, andrei con i parametri dello script in cui ogni comportamento è visibile in un posto.
Nirmal,

7
Anche per evitare che la visualizzazione modale passi immediatamente in show: false
ClearCloud8

214

Puoi anche includere questi attributi nella definizione modale stessa:

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

4
Sì, questa è la risposta più pulita e semplice (poiché funziona aggiungendo attributi di dati). Per riferimento, fondale e tastiera sono menzionati qui nella loro documentazione nella sezione Opzioni.
volato il

Se avvii il caricamento modale sulla pagina, questo è il modo migliore per rimuovere altre opzioni di chiusura.
santa

46

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.


1
Questo mi ha aiutato. Dopo aver impostato lo "sfondo:" statico ", l'utente può comunque chiudere il modale con un clic; sembrava un bug, ma questo ha funzionato!
Omar,

7
Per ora: $ ('# modale'). RemoveData ('bs.modal'). Modale ({sfondo: 'statico', tastiera: falso});
D3VELOPER,

34

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.


2
quindi, come ripristinarlo?
sertaconay,

3
Semplicemente elegante. grazie :) E @sertaconay crea una variabile booleana (per esempio) che verrà controllata per decidere se vuoi impedire il default
Nimrod Yonatan Ben-Nes

1
l'unica opzione qui che ha funzionato dopo un modale è stata
aperta

2
Questa è una soluzione perfetta se vuoi avere un controllo più preciso su quando i modali sono chiudibili e quando non lo sono.
Curos,

33

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

Questo è perfetto per un caso in cui il modale è dichiarato nell'html e viene aperto solo tramite javascript, ovvero non è presente alcun collegamento ad esso. Grazie!
hgolov,

22

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.


stackoverflow.com/questions/16030448/… Ma non mi piace questa soluzione
Victor

14

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


Questo consiglio è stato fornito anni prima.
Mickmackusa,

11

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

6

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.


4

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>

2

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.


Non puoi anche rimuovere il pulsante dall'intestazione modale?
Foop

A volte è utile utilizzare i CSS invece di modificare l'HTML.
Ha

2

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


2

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

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

come +1 per questo metodo, non voglio quell'opzione per tutti i modali.
tsohr

2

Oggi è molto semplice. Aggiungi solo:

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

Nel tuo divisore modale.


Questo consiglio è stato fornito anni prima su questa stessa pagina.
Mickmackusa,

1

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.


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

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.