Как спрятать модальное (popup) окно при клике в стороне?

Имеется вот такой код - при клике по ссылке появляется/пропадает окно.
Как спрятать модальное (popup) окно при клике в стороне?

<li onclick="myFunction()">Цены</li>



<div id="myDIV" style="position: absolute;color: black;left: 428px;width: 226px;top: 36px;padding: 9px 21px;display: none;">
	<a href="/info/kartina-na-holste-cena">Картины на холсте</a><br>
	<a href="/info/flip-flop-cena">Флип-флоп портреты</a><br>
	<a href="/info/portret-maslom-cena">Портреты маслом</a><br>
	<a href="/info/fotooboi-cena">Фотообои</a><br>
	<a href="/info/skinali-cena">Скинали на кухню</a><br>
	<a href="/info/zerkala-dlya-interiera-cena">Зеркала под заказ</a><br>
	<a href="/info/shirokoformatnaya-pechat-cena">Широкоформатная печать</a><br>
	<a href="/info/kupit-kartinu-v-minske-cena"><strong>Все цены</strong></a>
</div>


<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
  • @Famence
    Full-stack web-developer / freelancer
    Нужно либо добавить .overlay над содержимым страницы но под модальным окном и обрабатывать событие onClick по нему, либо обрабатывать событие клика по любому месту на странице и проверять, если клик был не по модальному окну, то скрывать это окно. Вот так:
    window.addEventListener('click', function(){
      if (!event.target.closest('#myDIV')) {
        document.getElementById("myDIV").style.display = "none";
      }
    });
    Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы