Simple modal

<button class="btn btn-secondary-grey" x-data @click="$dispatch('open-simple-modal', 'modal-test')">Ouvrir la modale</button>



<div class="simple-modal fixed inset-0 z-[100]"

     x-data="initOpenSimpleModal"

     x-show="isOpen"

     data-name="modal-test"

     @keydown.escape.window="close()"

>

    <div>

        <div class="simple-modal__overlay bg-background opacity-20 absolute inset-0 cursor-pointer" @click="close()"></div>

        <div class="simple-modal__wrapper bg-white border border-ui-light rounded-button absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] md:w-auto md:max-w-[70vw] max-h-[90vh] flex flex-col transition"

             :class="{

            'translate-y-[500%]': !isContentShow,

            '-translate-y-1/2': isContentShow

         }"

        >

            <div class="simple-modal__header flex justify-between items-center border-b border-ui">

                <div class="px-5 md:px-7 py-2.5 font-semibold">Le titre de la modale ici</div>

                <button @click="close()" class="link text-primary-accent hover:text-secondary p-7 md:py-8.5"><?= icon('close', 'w-3.25'); ?></button>

            </div>

            <div class="simple-modal__content p-5 md:px-7 overflow-hidden flex">

                <div class="overflow-auto little-scrollbar pr-5 md:pr-7.5">

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique urna eu libero faucibus, eu varius neque faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ac nunc ac nunc viverra feugiat. Duis sed ipsum elit. Duis bibendum porta ipsum a facilisis. Aenean in bibendum nulla. Nulla ut purus a nisi rhoncus molestie.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique urna eu libero faucibus, eu varius neque faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ac nunc ac nunc viverra feugiat. Duis sed ipsum elit. Duis bibendum porta ipsum a facilisis. Aenean in bibendum nulla. Nulla ut purus a nisi rhoncus molestie.</p>

                </div>

            </div>

        </div>

    </div>



</div>