How to close the new html tag by clicking on its ::backdrop

Backdrop clicks can be detected using the dialog bounding rect.

    var dialog = document.getElementsByTagName('dialog')[0];
    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();
        }
    });

Leave a Comment