Есть у меня модальное окно (всё в конце), которое нормально открывается / закрывается при вызове функции. Но надо, чтобы окно закрывалось при клике вне окна (затемненный фон), а если я на него накидываю функцию закрытия окна, то при клике по окну оно закрывается (я так понял из-за того, что окно является дочерним элементом). как это реализовать?
<div class="modal">
<div class="modal-body">
<div class="in-header">
<i class="fa fa-close" onclick="closeModal()"></i>
</div>
<div class="in-body">
Суперкрутой текст, вообще что угодно
</div>
</div>
</div>
function closeModal() {
$('.modal-body').stop().animate({
marginTop: '-100%',
}, 300, function(){
$('.modal').animate({ opacity : 0 }, 200, function(){
$('.modal').css({ 'display':'none' });
$('.modal-body').css({ 'marginTop':'100%' });
$('body').css("overflow", "auto");
});
});
}
function showModal() {
$('.modal').css("display", "flex");
$('body').css("overflow", "hidden");
$('.modal').animate({
opacity: '100%',
}, 150, function() {
$('.modal-body').animate({
marginTop: 0
}, 200);
});
}
PS изначально задано opacity: 0, а для modal-body: margin-top: 100%, сначала показывается фон, потом снизу выплывает окно