Question

我没有找到任何内置解决方案或解决方法来关闭html5元素，点击它的背景（:: backdrop），虽然它显然是一个基本功能。

Answer 1

可以使用对话框边界来检测背景点击。

var dialog = document.getElementByTagName('dialog');
dialog.showModal();
dialog.addEventListener('click', function (event) {
    var rect = dialog.getBoundingClientRect();
    var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
      && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
    if (!isInDialog) {
        dialog.close();
    }
});

Answer 2

另一种更有效的解决方案是将dialog - 内容包含在div padding: 0中。通过这种方式，您可以检查click事件的event.target，如果是背景，则引用对话框，如果是实际模态，则引用div内的任何其他元素。

通过不检查实际尺寸，我们可以防止布局周期。

Answer 3

对于任何绊倒这个问题并且想要遵循@meaku推荐的解决方案的人来说，这里我是如何解决它来使用a来封装元素而不是使用getBoundingClientRect（）计算：

＆＃13;

const popup = document.getElementById('popup');
const popupDialog = document.getElementById('popup-dialog');
popup.addEventListener('click', function(e){
  console.info(e.target.tagName);
  if (e.target.tagName === 'DIALOG') popupDialog.close()
});

＆＃13;

<div id="popup" style="padding: 0">
    <dialog id="popup-dialog" style="display:none;">
        <h4>Dialog Title</h4>
        <footer class="modal-footer">
            <button id="popup-close" type="button">close</button>
            <button id="popup-ok" type="button">ok</button>
        </footer>
    </dialog>
</div>

＆＃13;

Answer 4

我想出了一个非常简单的解决方案。在body: Column(children: [ Text('foo'), Expanded( child: ListView.builder( itemCount: list.length + 2, itemBuilder: (context, index) { if (index == 0) return Text("foo"); else if (index < list.length + 1) return Text("$index"); else return Text('bar'); }, ), ), ]),内添加一个div容器。然后检查那是否是整个事物的父对象。如果不是，则是对话框本身，可以关闭它。

HTML

<dialog>

JS

<dialog id="favDialog">
  <div class="test">
  Hello
  </div>
</dialog>

Answer 5

另一个类似于其他人提到的wrapped div方法的简单方法是给对话框本身padding: 0（例如Chrome倾向于给对话框填充），并将click事件添加到对话框。 form元素无论如何都会获得差异，因此不需要额外的div。我注意到上面的任何示例都没有使用该表单，因此我认为值得一用，因为它是使用对话框中的按钮时标准的一部分。

<dialog style="padding: 0; border: 0;">
  <form method="dialog">
    <button>Click here</button>
  </form>
</dialog>

<script>
function onClick(event) {
  if (event.target === dialog) {
    dialog.close();
  }
}

const dialog = document.querySelector("dialog");
dialog.addEventListener("click", onClick);
dialog.showModal();
</script>

Demo on CodePen

Answer 6

@Seralo答案的简化版本是：

dialog.addEventListener("click", event => {
    const rect = dialog.getBoundingClientRect();
    if (event.clientY < rect.top || event.clientY > rect.bottom ||
        event.clientX < rect.left || event.clientX > rect.right) {
        dialog.close();
    }
};

如何通过单击它的:: backdrop </dialog>关闭新的html <dialog>标记

6 个答案: