Имам модален диалогов прозорец на bootstrap, който искам да се покаже първоначално, а след това, когато потребителят кликне върху страницата, да изчезне. Имам следното:
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
Модалният прозорец се показва първоначално, но не се затваря, когато щракнете върху него извън модалния прозорец. Освен това областта на съдържанието не е сива.. Как мога да накарам модала да се покаже първоначално, а след това да се затвори, след като потребителят щракне извън областта? И как мога да накарам фона да бъде сив, както в демото?
Поставете modal('toggle')
вместо modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
за да затворите bootstrap modal, можете да подадете 'hide' като опция към метода modal, както следва
$('#modal').modal('hide');
Моля, погледнете работещия [fiddle here][2]
bootstrap също така предоставя събития, които можете да включите във функционалността на modal, например ако искате да задействате събитие, когато модалът е приключил скриването си от потребителя, можете да използвате hidden.bs.modal събитие Можете да прочетете повече за методите и събитията на модала тук в Documentation
Ако нито един от горните методи не работи, дайте id на вашия бутон за затваряне и задействайте щракването върху бутона за затваряне.
Моите пет цента за това е, че не искам да се налага да се насочи към bootstrap модал с id и като се има предвид, че трябва да има само един модал в даден момент следното трябва да бъде напълно достатъчно, за да премахнете модал като превключване може да бъде опасно:
$('.modal').removeClass('show');