Używam modemu Bootstrap na Twitterze jako okna kreatora i chciałbym uniemożliwić użytkownikowi zamknięcie go po kliknięciu poza modalem lub po naciśnięciu klawisza escape. Zamiast tego chcę, aby był zamknięty, gdy użytkownik naciśnie przycisk zakończenia. Jak mogę osiągnąć ten scenariusz?Zapobiegaj znikaniu modemu Bootstrap po kliknięciu na zewnątrz lub naciśnięciu klawisza escape?
przypadku korzystania JavaScript następnie:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
a jeśli HTML:
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
Działa też data-backdrop="static" kliknąć na zewnątrz i data-keyboard="false" ESC w div modalnym:
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
Inne propozycje są prawidłowe, jeśli trzeba ustawić programowo/czas pracy, ale jest to właściwy sposób robi to czas projektowania i myślę, że jest to najlepszy sposób na „oddzieleniu-of-obaw” -minded Devs. –
Miałem dwa modały na jednej stronie. Przynajmniej jeden z nich nigdy nie działał prawidłowo. Ale to rozwiązanie rozwiązuje. Również sensowne jest umieszczenie go w samym modalnym div. – goodbytes
To się nazywa doskonała odpowiedź !!!! –
Możesz użyć kodu poniżej:
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
aby zmienić domyślne zachowanie.
Jeśli trzeba wyłączyć klikając na zewnątrz, ale umożliwiają Wciśnięcie klawisza escape
$('#myModal').modal({
backdrop: 'static', // This disable for click outside event
keyboard: true // This for keyboard event
})
Twój kod działa po kliknięciu na boku modal, ale jeśli mogę używać HTML input pole wewnątrz modalnej-ciele następnie skupić się kursor na tym wejściu naciśnij klawisz, aby modał został zamknięty. Kliknij here
Wystarczy dodać
data-backdrop="static"idata-keyboard="false"atrybuty tej modalnej.
Np.
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});
Chociaż ten kod może pomóc w rozwiązaniu problemu, nie wyjaśnia _why_ i/lub _how_ to odpowiedź na pytanie. Zapewnienie tego dodatkowego kontekstu znacznie poprawiłoby jego długoterminową wartość edukacyjną. Proszę [edytuj] swoją odpowiedź, aby dodać wyjaśnienie, w tym, jakie ograniczenia i założenia mają zastosowanie. –
Twoja odpowiedź nie działa. Musisz ustawić opcje przed pokazaniem modalu. '$ ('# Modalne') modalne ({t: 'statyczne', klawiatura: false}, 'Pokaż');.' –
<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
myślę, że ten codepen Można prevent modal close css and bootstrap
Poniższy skrypt pracował dla mnie pomoc:
// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});
A jak pan go zamknąć. Jeśli chcesz po tym skończyć? – Prateekro
używam tych atrybutów i działa , data-keyboard="false" data-backdrop="static"
Duplikat. Odpowiada to dokładnie na pytanie: [Disallow twitter bootstrap modal window from closing] (http://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-zamknięcie?rq=1) – nickhar
thx, i nie można go znaleźć! –
dostarczono już rozwiązanie, zapoznaj się z poniższego linku: http://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing/25159755#25159755 –