Modal

<div class="nl-container nl-py-4 nl-font-museo">
    <p class="nl-mb-4">Click the button below to trigger the modal</p>
    <div class="nl-flex nl-flex-col nl-gap-4 nl-flex-align-start">
        <button type="button" class="nl-button" data-micromodal-trigger="test-modal">Open Modal</button>
        <button type="button" class="nl-button" data-micromodal-trigger="video-modal">Open Video Modal</button>
    </div>
</div>

<div id="test-modal" aria-hidden="true" class="nl-modal nl-max-w-md">
    <div class="nl-modal_overlay" tabindex="-1" data-micromodal-close>
        <div class="nl-modal_container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
            <button class="nl-modal_close" type="button" aria-label="Close modal" data-micromodal-close>
                <svg class="nl-block nl-w-3" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                    <path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path>
                </svg>
            </button>
            <header class="nl-modal_header">
                <h2 id="modal-title" class="nl-modal_title">
                    Modal Title
                </h2>
            </header>
            <div id="modal-content" class="nl-modal_content">
                <p class="nl-mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam alias ipsam fuga adipisci accusantium mollitia nihil laudantium? Eaque tempore aliquid explicabo natus neque eligendi distinctio? Adipisci officiis voluptas harum quam!</p>
                <a href="#" class="nl-button nl-button--sm">
                    Venture Forth
                </a>
            </div>
        </div>
    </div>
</div>

<div id="video-modal" aria-hidden="true" class="nl-modal nl-max-w-md">
    <div class="nl-modal_overlay" tabindex="-1" data-micromodal-close>
        <div class="nl-modal_container" role="dialog" aria-modal="true" aria-label="My Sweet Video">
            <button class="nl-modal_close" type="button" aria-label="Close modal" data-micromodal-close>
                <svg class="nl-block nl-w-3" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                    <path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path>
                </svg>
            </button>
            <div id="video-modal-content" class="nl-modal_content">
                <div class="nl-responsive-embed">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/AOe92FwtXRY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
<script>
    (function() {
        MicroModal.init({
            awaitOpenAnimation: true,
            awaitCloseAnimation: true,
            onClose: modal => {
                modal.classList.remove('is-open')
                // Check for embedded iframe videos and stop playback
                const iframe = modal.querySelector('iframe');
                // Uses this method to avoid a hardware acceleration bug on
                // Chromium browsers running on Windows
                // see: https://bugs.chromium.org/p/chromium/issues/detail?id=752726
                if (iframe) {
                    const clone = iframe.cloneNode()
                    const parent = iframe.parentNode;
                    iframe.remove()
                    parent.appendChild(clone)
                }
            }
        });
        // Helper to ensure modals are placed at the end of the body, in the event the markup isn't fully controlled. 
        window.addEventListener("load", function() {
            // Relocate the modal to the end of the body 
            const modals = document.querySelectorAll('.nl-modal');
            // Bail if no modals are found for some reason
            if (!modals) return;
            // Loop throught the modals and move the ones that haven't been moved already
            Array.from(modals).forEach(modal => {
                if (modal.relocated !== true) {
                    modal.relocated = true
                    document.body.appendChild(modal)
                }
            })
        })
    })()
</script>