HAM Recipes
HAM Recipes
Alex List
Tailwind Cheat Sheet
Vanilla Snippets
current
current
old
Introduction
About
Reference
Examples
Edit Profile
My Modal
Code
Full Recipe
HTML Only
Tailwind Only
Mini Only
<button class="bg-white rounded px-3 py-2 text-gray-900" :click="isModalOpen=true; $('#modal').showModal();" > Edit Profile </button> <div class="relative z-10 duration-300 transition-all opacity-0" :class="isModalOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'" > <div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div> <dialog class="rounded-lg max-w-[96%] max-h-[96%] w-[800px] h-[800px]" :class="isModalOpen ? 'opacity-100 translate-y-0 sm:scale-100' : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'" :clickme="this.close();isModalOpen=false" id="modal" > <div class="p-4 flex flex-col gap-4"> <h1 class="text-xl text-gray-900 font-bold"> My Modal </h1> <div class="flex flex-col gap-2"> </div> </div> </dialog> </div>
Copied
Copy
<button> Edit Profile </button> <div> <div></div> <dialog id="modal"> <div> <h1> My Modal </h1> <div> </div> </div> </dialog> </div>
<button class="bg-white rounded px-3 py-2 text-gray-900"> Edit Profile </button> <div class="relative z-10 duration-300 transition-all opacity-0"> <div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div> <dialog class="rounded-lg max-w-[96%] max-h-[96%] w-[800px] h-[800px]" id="modal"> <div class="p-4 flex flex-col gap-4"> <h1 class="text-xl text-gray-900 font-bold"> My Modal </h1> <div class="flex flex-col gap-2"> </div> </div> </dialog> </div>
<button :click="isModalOpen=true; $('#modal').showModal();"> Edit Profile </button> <div :class="isModalOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'"> <div></div> <dialog :class="isModalOpen ? 'opacity-100 translate-y-0 sm:scale-100' : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'" :clickme="this.close();isModalOpen=false" id="modal"> <div> <h1> My Modal </h1> <div> </div> </div> </dialog> </div>
Description
