close

Description
Syntax
Examples
Links

Description

The close of HTMLDialogElement for JS closes the dialog element.

Syntax

dialog.close([ result ])

<!doctype html>
<html>
<head>
    <style>
        dialog
        {
            //display: block;
        }
        dialog::after
        {
            content: "close";
        }
        dialog[open]::after
        {
            content: "open";
        }
        dialog:modal::after
        {
            content: "modal";
        }
    </style>
</head>
<body>
    <button>button</button>
    <dialog></dialog>
    <script>
        const myelement = document.querySelector("dialog");
        function myfunction1()
        {
            if(!myelement.open)
            {
                myelement.show();
            }
            else if(!myelement.isModal)
            {
                myelement.close();
                myelement.showModal();
                myelement.addEventListener("click", myfunction2);
            }
        }
        function myfunction2()
        {
            myelement.close();
            myelement.removeEventListener("click", myfunction2);
        }
        document.querySelector("button").addEventListener("click", myfunction1);
    </script>
</body>
</html>

4

<!doctype html>
<html>
<head>
    <style>
        dialog
        {
            //display: block;
        }
        dialog::after
        {
            content: "close";
        }
        dialog[open]::after
        {
            content: "open";
        }
        dialog:modal::after
        {
            content: "modal";
        }
    </style>
</head>
<body>
    <button>button</button>
    <dialog></dialog>
    <script>
        const myelement = document.querySelector("dialog");
        myelement.returnValue = "myreturnvalue";
        function myfunction1()
        {
            if(!myelement.open)
            {
                myelement.show();
            }
            else if(!myelement.isModal)
            {
                myelement.close("myreturnvalue");
                myelement.showModal();
                myelement.addEventListener("click", myfunction2);
            }
        }
        function myfunction2()
        {
            myelement.close("myreturnvalue");
            myelement.removeEventListener("click", myfunction2);
        }
        document.querySelector("button").addEventListener("click", myfunction1);
    </script>
</body>
</html>