Как закрыть собственный HTML-диалог при щелчке снаружи с помощью JavaScript?

Question

Я использую элемент HTML. Я хочу иметь возможность закрыть диалоговое окно при нажатии за его пределами. Использование события «blur» или «focusout» не работает.

Я хочу то же самое, что и диалоговое окно Material Design, где оно закрывается, когда вы щелкаете за его пределами:

https://material -components-web.appspot.com / dialog.html

Как мне этого добиться?

Заранее спасибо.

Answer 1

Ну, закодируйте его так же, как говорите. Если вы щелкнете по элементу, который не является нужным, закройте его. Вот пример:

<div id="content">

  <div id="dialog" class="dialogComponent">

      <div id="foo" class="dialogComponent">
        test 123 123 123 123 
        <input class="dialogComponent class2" type="text">
      </div>
      <button class="dialogComponent">Submit</button>
  </div>

</div>



#content { width: 100%; height: 333px; background-color: black;}
#dialog { margin: 33px;  background-color: blue; }


$('#content').click(function(e) {
    if (!e.target.classList.contains("dialogComponent"))
    alert('Closing Dialog');
});

https://jsfiddle.net/scd9mwk7/