come chiudere modal cliccando su sfondo (Twitter Bootstrap)

Question

Ciao ho impostato il valore predefinito per modali Twitter bootstrap di non chiudere quando l'utente fa clic sullo sfondo

$.fn.modal.defaults = { 
    backdrop: 'static' 
    , keyboard: false 
    , show: false 
} 

Tuttavia, v'è una particolare scenario in cui ho è necessario sovrascrivere questa impostazione predefinita per consentire all'utente di fare clic sullo sfondo per chiudere la modal.

ho cercato di sovrascrivere durante la visualizzazione della modale particolare

//Modal to be displayed and allow user to close it by clicking on background 
view = new Onethingaday.Views.Muses.MuseModalView 
    model: @options.muse 

$('.modal').html view.render().el 
$('.modal').bind 'shown', => 
    $('.modal').modal 
    'backdrop': true 
    ('.modal').unbind 'show' 
$('.modal').modal('show') 

Tuttavia, il mio codice di cui sopra non funziona. Qualcuno ha qualche idea su come modificare il codice per farlo funzionare. Inoltre, il codice sopra sembra cambiare il comportamento predefinito di TUTTE le mie modali nell'app che non è quello che voglio. Come cambio lo sfondo solo per questo particolare modale (ad es. MuseModalView)? Grazie!

Answer 1

Mi stavo occupando di un problema simile oggi. All'inizio ho trovato questa discussione: https://github.com/twitter/bootstrap/issues/1202. Qualcuno ha suggerito l'impostazione isShown il falso, per evitare che la finestra modale dalla chiusura sul contesto clic:

$('myelement').data('modal').isShown = false 

posso `t dire che mi è piaciuto il trucco, soprattutto quando ho scoperto che finestra modale non si chiude correttamente su OK/Annulla clic su - mentre isShown è impostato su falso. non riuscivo a trovare una soluzione migliore, quindi ho fatto questo: ho impostato di default globale sullo sfondo: "statica" (disabilitare stretta sul contesto clic) e ha aggiunto di questo codice:

$('#myModal').on('shown', function() { 
    $("div.modal-backdrop").on('click', function() { 
     if(myCondition == true) { 
     $('#myModal').modal('hide'); 
     } 
    }) 
    }); 

div con classe modale-backdrop è aggiunto dinamicamente al corpo quando la finestra modale viene aperta e rimossa quando chiusa - per ogni finestra modale. Ciò significa che dovremmo assicurarci di gestirlo correttamente se impiliamo finestre modali. Quindi, ho regolato un po 'il mio codice superiore:

$('#myModal').on('shown', function() { 
    $("div.modal-backdrop").each(function(){ 
     if($(this).data('wired') !== 'true'){ 
     $(this).on('click', function() { 
      if(myCondition == true){ 
      $('#myModal').modal('hide'); 
      } 
     }).data('wired', true); 
     } 
    }) 
    }); 

Questo codice deve chiudere la finestra modale solo quando myCondition è true. Dovrebbe funzionare bene per me, e spero che possa aiutare te e chiunque altro incontrerà problemi simili.