Modal With Hash Uri

<!--Based on the example here https://laracasts.com/series/modals-with-the-tall-stack/episodes/3-->
<style>
    [x-cloak] {
        display: none !important;
    }
</style>

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<div class="p-8">
    <!--  <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>-->

    <p>
        <a href="#test" class="underline text-blue-500 mb-4">Open Modal</a>
    </p>

    <!--  Todo: make the hash dynamic -->
    <div x-data="{ show: false }" x-show="show" x-on:hashchange.window="show = (location.hash === '#test');" x-on:keydown.escape.window="show = false, removehash()" x-init="show = (window.location.hash === '#test')" x-cloak>

        <div class="fixed inset-0 bg-gray-900 opacity-90"></div>

        <div class="bg-white shadow-md p-4 max-w-sm h-48 m-auto rounded-md fixed inset-0" @click.outside="show = false, removehash()">

            <div class="flex flex-col h-full justify-between">

                <header>
                    <h3 class="font-bold text-lg">
                        Title
                    </h3>
                </header>
                <main class="mb-4">
                    Body
                </main>
                <footer>

                    <div class="flex gap-2">
                        <!-- One way to close is to pass another hash on a link -->
                        <a href="#" class="p-2 rounded bg-gray-300">
                            Close v1
                        </a>

                        <!--          Another option is with an onclick event and our removehash() function -->
                        <button class="p-2 rounded bg-gray-300" @click="show = false, removehash()">
                            Close v2
                        </button>
                    </div>

                </footer>
            </div>
        </div>

    </div>

</div>

<!-- See https://stackoverflow.com/questions/54080391/remove-hash-from-url-without-refreshing -->

<script>
    function removehash() {
        setTimeout(function() {
            history.replaceState("", document.title, window.location.pathname);
        }, 1);
    }
</script>