Jeżeli jeszcze nie słyszeliście o Twitter Bootstrap to zanim przeczytacie, marsz na tą stronę! :)
Dobra, już zapoznani? :)
Bootstrap daje nam możliwość tworzenia okien modalnych – tak jak dialog w jQuery UI, ale nie tak zupełnie tak samo :)
Jest kilka możliwości pracy z oknami Modalnymi zarówno poprzez JS jak i przez atrybut data. Nie chcę wchodzić w szczegóły prawie wszystko można przeczytać tutaj.
Jedyny problem jaki jest z tym oknem modalnym to event click na szarym/ciemnym tle. Nie zależnie co podacie i zrobicie to kliknięcie myszką na tle spowoduje schowanie okna modalnego.
Dokumentacja mówi jedynie, że mamy opcję backdrop która dodaje tło (jeżeli opcja jest ustawiona na false to tła nie ma, i nie ma problemu z eventem click, no ale… nie ma tła:)). Jednak jeżeli poczytamy sobie kod, to zobaczymy ukryty gem. Mianowicie, jeżeli przy inicjalizacji okna ustawimy wartość backdrop na static’ to zamykanie/chownie modalnego okna na click zostanie wyłączone i jedyną opcją zamknięcia okna będzie nasz button, przycisk na klawiaturze escape czy też krzyżyk w górnym prawym rogu.
Niestety, jedyną możliwością utworzenia statycznego modalnego okna z tłem jest poprzez skrypt JS. Można modyfikować kod od Twitter Bootsrap ale mówiąc szczerze, czy przy każdym update będziecie chcieli znów to poprawiać? Mnie się nie chciało :)
Przykład wywołania metody:
$('.myModal').modal({backdrop: 'static' });
Link bezpośredni do JS Fiddle.
