当有人点击外部时如何关闭 showModal()

Question

我实现了 JS show Modal() 的功能，当有人在文档的弹出窗口外单击时，我想关闭它。

Answer 1

下面是一个工作演示，您可以参考：

  <!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
    <form method="dialog">
        <p>
            <label for="favAnimal">Favorite animal:</label>
            <select id="favAnimal" name="favAnimal">
                <option></option>
                <option>Brine shrimp</option>
                <option>Red panda</option>
                <option>Spider monkey</option>
            </select>
        </p>
        <div>
            <button id="cancel" type="reset">Cancel</button>
            <button type="submit">Confirm</button>
        </div>
    </form>
</dialog>

<div>
    <button id="updateDetails">Update details</button>
</div>

<script>
    const updateButton = document.getElementById("updateDetails");
    const cancelButton = document.getElementById("cancel");
    const dialog = document.getElementById("favDialog");
    dialog.returnValue = "favAnimal";

    function openCheck(dialog) {
        if (dialog.open) {
            console.log("Dialog open");
        } else {
            console.log("Dialog closed");
        }
    }

    // Update button opens a modal dialog
    updateButton.addEventListener("click", () => {
        dialog.showModal();
        openCheck(dialog);
    });

    // Form cancel button closes the dialog box
    cancelButton.addEventListener("click", () => {
        dialog.close("animalNotChosen");
        openCheck(dialog);
    });
 //close showModal() when someone click outside
    window.onclick = function (event) {
        if (event.target == dialog) {
            dialog.close("animalNotChosen");
            openCheck(dialog);
        }}
</script> 

结果：