Question

我使用HTML元素。我希望能够在单击外部时关闭对话框。使用＆＃34;模糊＆＃34;或者＆＃34;聚焦＆＃34;事件不起作用。

我想要与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/

Answer 2

这是我的方法：

function dialogClickHandler(e) {
    if (e.target.tagName !== 'DIALOG') //This prevents issues with forms
        return;

    const rect = e.target.getBoundingClientRect();

    const clickedInDialog = (
        rect.top <= e.clientY &&
        e.clientY <= rect.top + rect.height &&
        rect.left <= e.clientX &&
        e.clientX <= rect.left + rect.width
    );

    if (clickedInDialog === false)
        e.target.close();
}

如何在使用JavaScript单击外部时关闭本机HTML对话框？

2 个答案: