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

Question

[Андрей Борчик]

Имеется вот такой код - при клике по ссылке появляется/пропадает окно.
Как спрятать модальное (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>

Comments

[Анатолий Жаров]

1) можно сделать для модалки подложку с position: fixed, слушать клик на ней
2) можно слушать клик на body

Answer 1

[Андрей Маджидов]

Нужно либо добавить .overlay над содержимым страницы но под модальным окном и обрабатывать событие onClick по нему, либо обрабатывать событие клика по любому месту на странице и проверять, если клик был не по модальному окну, то скрывать это окно. Вот так:

window.addEventListener('click', function(){
  if (!event.target.closest('#myDIV')) {
    document.getElementById("myDIV").style.display = "none";
  }
});

Comments

[Андрей Борчик]

Добавил ваш код - не работает...:(
сайт - Arthata.by
Окно вообще перестало открываться

[Андрей Маджидов]

Андрей Борчик, проверьте консоль на предмет ошибок. Может не верный id блока?

[Андрей Борчик]

Андрей Маджидов, вроде бы все в порядке... но не работает

[Андрей Маджидов]

Андрей Борчик, попробуйте так:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
        function closeModalOnClickOutside(){
          if (!event.target.closest('#myDIV')) {
             document.getElementById("myDIV").style.display = "none";
             window.removeEventListener('click', closeModalOnClickOutside);
          }
        }
        window.addEventListener('click', closeModalOnClickOutside);
    } else {
        x.style.display = "none";
    }
}

[Андрей Борчик]

Андрей Маджидов, не открывается так окно :(

[Андрей Маджидов]

Андрей Борчик, окей. Чутка изменим:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        function closeModalOnClickOutside(){
          if (!event.target.closest('#myDIV') && document.getElementById("myDIV").style.display !== "none") {
             document.getElementById("myDIV").style.display = "none";
             window.removeEventListener('mousedown', closeModalOnClickOutside);
          }
        }
        window.addEventListener('mousedown', closeModalOnClickOutside);
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

[Андрей Борчик]

Андрей Маджидов, О! уже лучше. Но теперь при открытом окне и повторном клике на ссылку Цена - происходят закрытие и снова открытие.

[Андрей Маджидов]

Андрей Борчик, тогда попробуем игнорировать клик по ссылке.
Добавьте ссылке id="myLink" и попробуйте так:

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    function closeModalOnClickOutside(){
      if (!event.target.closest('#myDIV') && !event.target.closest('#myLink') && document.getElementById("myDIV").style.display !== "none") {
        console.log('close');
        window.removeEventListener('mousedown', closeModalOnClickOutside);
        document.getElementById("myDIV").style.display = "none";
      }
    }
    window.addEventListener('mousedown', closeModalOnClickOutside);
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

[Андрей Борчик]

Андрей Маджидов, заработало! Но теперь срабатывает после второго клика по ссылке. Далее уже все хорошо. Обновляю страницу и снова со второго раза срабатывает

[Андрей Маджидов]

Андрей Борчик, зашел посмотрел - работает с первого раза. У вас там стили походу слетели и изначально у #myDiv display = 'block'.
Первый клик по ссылке его скрывает. Второй клик открывает.

[Андрей Борчик]

Андрей Маджидов, подправил. Спасибо

[Андрей Борчик]

Андрей Маджидов, еще вопросик... почему-то в сафари на маке не срабатывает закрытие при клике в фоне