Estreno
La ciudad dormida
Viernes 14 · 21:30 · Sala 3
Quedan 12 butacas
Theater curtain modal
A velvet curtain closes over the page and opens again to present the ticket for the premiere.
Settings
Code
<div class="uvq13-tel"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">See the premiere</button><div class="scr"></div><i class="cu l" aria-hidden="true"></i><i class="cu r" aria-hidden="true"></i><i class="vl" aria-hidden="true"></i><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-tel-t"><p class="kk">Premiere</p><p class="ti" id="uvq13-tel-t">The Sleeping City</p><p class="dt">Friday 14 · 21:30 · Screen 3</p><p class="sp">12 seats left</p><div class="ac"><button type="button" class="go">Book a seat</button><button type="button" class="x">Not now</button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Some announcements deserve a bit of ceremony, and this modal stages one. A scalloped valance drops, two pleated velvet curtains draw across the page with a gold fringe, then part and gather to the sides while a program card rises under a spotlight. Closing draws the curtains again before they leave. It fits theaters, cinemas, launches, award nights and festival pages.
The main color is the velvet and the second one the gold trim, and the text field holds the title of the show. Escape, the backdrop and both buttons run the closing sequence and give focus back to the button that opened it.