edge-components

Modal: Disabled Outside And Escape 

<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn">
    Toggle Modal
    <template x-teleport="body">
        <dialog class="modal modal-open " x-show="open">
            <div class="modal-box">

                <button @click="open = false" class="btn btn-sm btn-circle absolute right-2 top-2">
                    x
                </button>

                <h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
                <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
            </div>
        </dialog>
    </template>
</button>
 
@jrmc.modal({ button: { text: 'Toggle Modal' }, outside: false, escape: false })
  @!jrmc.button({ text: 'x', class: 'btn-sm btn-circle absolute right-2 top-2', ...$context.event.close })
  <h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
@end

Modal not implementation daysyui solution, use alpinejs for open modal