Content and Image Modals using Dialogs - No Javascript

No javascript needed.

This tailwind example is contributed by Sherry Lynne, on 28-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author Sherry Lynne

Tailwind v3.4 179

Fork Fullscreen

<div class="bg-white font-sans font-light text-black w-screen min-h-screen">
  <div class="p-5">
    <h1 class="text-4xl lg:text-5xl xl:text-6xl font-light font-extralight">Modals and Dialogs (No JS Needed)</h1>
    <div class="mt-5">
      <h2 class="text-2xl lg:text-3xl my-2">Dialog Modals</h2>
      <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base"
       command="show-modal" commandfor="dialog2">Open a dialog</button>
      <dialog id="dialog2" class="m-auto p-3 text-md max-w-3/4 lg:max-w-2xl xl:max-w-3xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border bg-neutral-100 border-neutral-300">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button commandfor="dialog2" command="close" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This is a dialog.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          <p class="my-3">This focus-trapping dialog uses attribute closedby="none" so it can only be closed by clicking its close button.
            The user cannot interact with background content or tab to other parts of the page.</p>
          
          <form method="dialog" class="my-3 text-right">
            <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Ok</button>
          </form>
        </div>
      </dialog>
      <hr class="my-4">
      <dialog id="dialog3" open class="m-auto autofocus p-3 text-md max-w-3/4 lg:max-w-2xl xl:max-w-3xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border shadow-lg bg-neutral-100 border-neutral-300">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button commandfor="dialog3" command="close" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This dialog defaults to open on page load.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          <p class="my-3">When dialogs are open on page load, you cannot shade or blur the backdrop behind them.</p> 
          <p class="my-3">You can add the attribute closed-by="none" to make them trap focus and prevent interaction with other page elements.
          
          <form method="dialog" class="my-3 text-right">
            <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Close</button>
          </form>
        </div>
      </dialog> 
      <div class="[dialog[open]+&]:hidden">
        <button class="rounded-full bg-blue-950 hover:bg-indigo-950 my-2 py-2 px-5 text-center align-middle text-white"
        command="show-modal" commandfor="dialog3">Re-open initial dialog</button>     
      <hr class="my-4">
      </div>
      <button class="rounded-full bg-blue-950 hover:bg-indigo-950 my-2 py-2 px-5 text-center align-middle text-white"
       command="show-modal" commandfor="dialog4">Open a large dialog</button>
      <dialog id="dialog4" class="m-auto p-3 text-md max-w-3/4 lg:max-w-5xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border bg-neutral-100 border-neutral-300">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button commandfor="dialog4" command="close" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This is a large dialog.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          
          <div class="grid md:grid-cols-2 gap-x-4">
            <div>
              <p class="my-3">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
              <p class="my-3"><img class="block mx-auto" alt="placeholder 1" src="https://placecats.com/350/200"></p>
            </div>
            <div>
              <p class="my-3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
              <p class="my-3">It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
            </div>
          </div>
          
          <form method="dialog" class="my-3 text-right">
            <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Close</button>
          </form>
        </div>
      </dialog>
      <hr class="my-4">
      <h2 class="text-2xl lg:text-3xl my-2">Content Popover</h2>
      <p>IMO, having a popover that looks/acts like a standard dialog just creates extra code, but this is an example.</p>
      <button class="rounded-full bg-blue-950 hover:bg-indigo-950 my-2 py-2 px-5 text-center align-middle text-white" 
       popovertarget="dialog1">Open popover</button>
      <dialog id="dialog1" popover class="m-auto p-3 mx-5 md:mx-auto text-md md:max-w-lg lg:max-w-2xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border border-neutral-300 bg-neutral-100">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button popovertarget="dialog1" popovertargetaction="hide" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This is a popover.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          <p class="my-3">Not only can this popover can be closed by clicking the escape key or its close buttons, it can also be closed by clicking anywhere outside of itself.</p>     
          
          <div class="my-3 text-right">
            <button popovertarget="dialog1" popovertargetaction="hide" class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Close</button>
          </div>
        </div>
      </dialog>
      <hr class="my-4">
      <h2 class="text-2xl lg:text-3xl my-2">Image Popover</h2>
      <p>IMO, best use for popover is a unique usage, like image expansion.</p>
      <button popovertarget="popover" aria-label="open image in a modal" class="text-base my-3">
        <img alt="cat thumbnail" src="https://placecats.com/350/280">
        <p class="my-1 font-normal">Enlarge Image 
          <span class="ml-1 inline-block size-[2.1rem] text-2xl font-light text-white bg-sky-700 rounded-full">&#65291;</span></p>
      </button>
      <dialog id="popover" popover class="m-auto bg-white border border-neutral-500 md:mx-auto max-h-svh shadow-lg backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs">
        <div class="text-right">
          <button class="absolute top-2 right-2 text-current size-[2.5rem] text-xl bg-white rounded-full font-bold" 
          popovertarget="popover" popovertargetaction="hide" aria-label="close modal" >&#x2715;</button>
        </div>
        <figure class="block mx-auto">
        <img alt="big cat pic" src="https://placecats.com/700/560">   
        <figcaption class="text-base font-light p-3">
          <p>I'm the caption.</p>
        </figcaption>
        <figure> 
      </dialog>
    </div>
  </div>
</div>

Related Examples

Animated modal with Tailwind Css and alpinejs

Michael Andreuzza

2 years ago

3.8k
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
OTPverification

Ratikanta Pradhan

1 year ago

1.1k
confirmation modal
confirmation modal

aditya_sharma

3 weeks ago

175
Modal
Responsive model

inbarajan P

2 years ago

3.7k
Confirmation model

Mr Robot

4 years ago

13.6k
PROCESS SELECTOR
Created was one shot generated using https://inspi.me

yogourt

8 months ago

470
Error popup modal

Odessa Young

3 years ago

17k
Incentives
tailwind css Incentives

Anonymous

2 years ago

5.9k
iOS 16 Popup
iOS 16 Popup — Alpine.js

Omer fils ELENGA

10 months ago

452
Incense Meditation
material used to produce a fragrant odor when burned.

Augustin

1 year ago

1.3k
Donate Hero section
Best New tailwindcss,help save the children

ORGIN_DREAMS

1 year ago

1.3k