Как сделать чтобы модальное окно закрывалось при нажатии вне элемента?

Question

[Антон]

Приветствую, подскажите пожалуйста вот я к примеру вызываю модальное окно путем удаления стиля "display: none"

<a onClick="getElementById('popup').removeAttribute('style');">
<div id="popup">
Содержимое окна
</div>
<a class="CloseButton" onClick="getElementById('popup').style.display='none';"></a>

Как сделать чтобы окно закрывалось не по нажатию кнопки а по нажатию вне элемента? Заранее спасибо!

ps. Предпологаю что это костыль, поэтому приму так же советы по упрощению)))

Comments

[alex]

Закрытие элемента по клику вне его блока на js, не jquery?

[Антон]

Alex: спасибо!) Хочу попробовать повесить обработчик на body, как вы думаете насколько это целесообразно?)))

[Сергей delphinpro]

Антон: Целесообразнее сделать подложку под окном

<div class=backdrop></div>
<div class=modal></div>

.backdrop - fixed на весь экран
.modal - z-index`ом поверх него

Клик для закрытия ловите на бэкдропе

Если будете вешать на body придется дополнительно контролировать откуда пришел клик (внутри модалки или нет), потому что любое неостановленное событие всплывет до самого верха.

[Антон]

Сергей: Благодарю за совет!)

[dummyman]

Антон: Не забудьте у body overflow-y: hidden; на время отображения модальника. И потом
overflow-y: scroll;
А то бесит что страница скроллится под маской модальника.

Answer 1

[Negwereth]

Проверяйте при клике или элемент не находится внутри модальника.