2013-01-10 12 views
8

Hi ustawić domyślne czasowniki modalne twitter bootstrap aby nie zamknąć, gdy użytkownik kliknie na tleJak zamknąć modal klikając na tle (Twitter Bootstrap)

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

Jednak istnieje jeden konkretny scenariusz w którym ja trzeba nadpisać tę wartość domyślną, aby umożliwić użytkownikowi kliknięcie tła w celu zamknięcia modalu.

Starałem się zastąpić go podczas wyświetlania szczególną modal

//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') 

Jednak mój powyższy kod nie działa. Każdy ma pomysł, jak zmodyfikować kod, aby działał. Ponadto powyższy kod wydaje się zmieniać domyślne zachowanie WSZYSTKICH moich modów w aplikacji, co nie jest tym, czego chcę. Jak zmienić tło dla tego konkretnego modalu (np. MuseModalView)? Dzięki!

+1

Czy próbowałeś inicjalizacji modal z 'opcjami'? Na przykład: '$ ('# myModal'). Modal ({ backdrop: true });' – dunli

Odpowiedz

7

Miałem dzisiaj do czynienia z podobnym problemem. Na początku znalazłem tę dyskusję: https://github.com/twitter/bootstrap/issues/1202. Ktoś zaproponował ustawienie isShown na false, aby zapobiec okno modalne z zamknięciem na tło kliknij:

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

Nie mogę powiedzieć, że lubię hack, zwłaszcza gdy okazało się, że modalne okno nie zamyka się prawidłowo na Kliknij przycisk OK/Anuluj, kliknij - gdy isShown ma wartość false. nie mogłem znaleźć lepsze rozwiązanie, więc zrobiłem to: ustawić globalną domyślne tło: „static” (wyłączyć blisko na tło kliknięcie) i dodaje ten kod:

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

div z klasy modalnej-tło jest dynamicznie dołączane do ciała, gdy okno modalne jest otwierane i usuwane po zamknięciu - dla każdego okna modalnego. Oznacza to, że powinniśmy się upewnić, że traktujemy to poprawnie, jeśli stosujemy okna modalne. Tak więc zmieniłem nieco górny kod:

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

Ten kod powinien zamknąć okno modalne tylko wtedy, gdy myCondition jest prawdziwe. To powinno działać dobrze dla mnie i mam nadzieję, że pomoże to tobie i każdemu, kto spotka podobny problem.

Powiązane problemy