Как закрыть по клику на его ::backdrop?

Question

[Айнур Ярулин]

Здравствуйте, вообщем только что узнал, что существует HTML тег <dialog>, как я понял,
он нужен, чтобы создавать модальные окна.

При открытии у этого тега появляется свой задний фон, его можно стилизовать, но можно ли по клику на этот фон,
закрыть само модальное окно?

https://codepen.io/squadcoder/pen/PobYgvo?editors=0110

Answer 1

[ⓒⓢⓢ]

похоже что нельзя

но можно контент поместить в слой

<dialog class="popup">
  <div class="layer">
    ...
  </div>
<dialog>

а у слоя останавливать всплывающие события => тогда можно отловить клики вне модалки, примерно так:

document.querySelector('.layer').addEventListener('click', (e) => e.stopPropagation());
document.querySelector('.popup').addEventListener('click', (e) => e.target.close());

Comments

[Айнур Ярулин]

да я примерно так и задумывал сделать, просто хотел узнать, вдруг есть какое-то лаконичное решение

Answer 2

[Exploding]

Как-то так можно

$(document).on("click", function(e){
	if(!$(e.target).closest("dialog").length)
		$("dialog")[0].close();
});

Comments

[Айнур Ярулин]

попробую сделать