html show modal dialog

    <button onclick="showModalDialog()">show modal dialog</button>
    <dialog id="dialog" onclose="onModalClose(event)">
        <header>This is a sample dialog</header>
        <form method="dialog">
            <p>What is your favorite pet animal?</p>
            <menu>
                <button value="feline">Cats</button>
                <button value="canine">Dogs</button>
                <button value="other">other</button>
            </menu>
        </form>
    </dialog>

    <script type="text/javascript">
        function showModalDialog() {
            document.querySelector('#dialog').showModal()
        }
        function onModalClose(event) {
            const value = event.target.returnValue
            console.log(value)
        }
    </script>

https://watercss.kognise.dev/#installation