Как применить «if target target» в jQuery для div и применить ко всем детям (проблема с закрытием режима)?

Question

У меня типичная модальная настройка на странице. Вы нажимаете кнопку, чтобы активировать. Экран темнеет (через полноэкранный фон) и передняя часть его модальна (самый высокий z-индекс).

У меня также обычно устанавливается, где вы можете либо нажать кнопку закрытия, либо в любом месте за пределами основного режима, чтобы закрыть его.

Это все работает нормально, если модальное поле пусто.

Проблема: когда вы щелкаете по любому дочернему содержимому в модальном режиме (текст, div и т. Д.), Это также закрывает модальное окно.

Ниже приведен мой код, который должен игнорировать щелчки внутри #modal, но он не применяет его ко всему дочернему контенту внутри него.

# затемнение представляет собой полупрозрачный полноэкранный div за основным модальным (общий модальный эффект).

$("#blackout").click(function(event){
if(event.target === modal){
return false;
}
else{
$("#blackout").css( 'display', 'none');
} 
});

Есть ли способ изменить код так, чтобы выражение if применялось к модальному, и что-нибудь внутри него?

Спасибо.

Answer 1

Я смог решить проблему сам. Возможно, это будет полезно другим.

Предполагая, что вашим основным модальным div является #modal, добавление следующего кода все равно разрешит функциональность ссылок и т. Д. На дочерних элементах внутри модального режима, но при этом позволит избежать нежелательного закрытия модального режима.

$("#modal").click(function(e){
       e.stopPropagation();
});