HAM Recipes
HAM Recipes
Alex List
Tailwind Cheat Sheet
Vanilla Snippets
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
