Modal required alpineJS
@jrmc.modal({ button: { text: 'Toggle Modal', class: 'btn-primary' } })
<h3 class="text-lg font-bold">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
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-primary">
Toggle Modal
<template x-teleport="body">
<dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
<div class="modal-box" @click.outside="open = false">
<h3 class="text-lg font-bold">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', class: 'btn-primary' } })
<h3 class="text-lg font-bold">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>
@slot('action')
@!jrmc.button({ text: 'ok', ...$context.event.close })
@end
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-primary">
Toggle Modal
<template x-teleport="body">
<dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
<div class="modal-box" @click.outside="open = false">
<h3 class="text-lg font-bold">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 class="modal-action">
<button @click="open = false" class="btn">
ok
</button>
</div>
</div>
</dialog>
</template>
</button>
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
<template x-teleport="body">
<dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
<div class="modal-box" @click.outside="open = false">
<h3 class="text-lg font-bold">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="text-lg font-bold">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
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn">
Toggle Modal
<template x-teleport="body">
<dialog :class="open ? 'modal-open' : ''" class="modal " 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="text-lg font-bold">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' }, mobile: true })
<h3 class="text-lg font-bold">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
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn">
Toggle Modal
<template x-teleport="body">
<dialog :class="open ? 'modal-open' : ''" class="modal modal-bottom sm:modal-middle" x-show="open" @keyup.escape.window="open = false" >
<div class="modal-box" @click.outside="open = false">
<h3 class="text-lg font-bold">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: { class: 'btn-error' } })
@slot('button')
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="w-6 h-6" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path fill="currentColor" d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"/></svg>
@end
<form id="confirm">
<h3 class="text-lg font-bold">Are you sure ?</h3>
</form>
@slot('action')
@!jrmc.button({ text: 'cancel', class: 'btn-ghost', ...$context.event.close })
@!jrmc.button({ text: 'ok', class: 'btn-error', form: 'confirm' })
@end
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-error">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="w-6 h-6" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path fill="currentColor" d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"/></svg>
<template x-teleport="body">
<dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
<div class="modal-box" @click.outside="open = false">
<form id="confirm">
<h3 class="text-lg font-bold">Are you sure ?</h3>
</form>
<div class="modal-action">
<button @click="open = false" class="btn btn-ghost">
cancel
</button>
<button form="confirm" class="btn btn-error">
ok
</button>
</div>
</div>
</dialog>
</template>
</button>