Free & Premium Popup Modals
Download the modal files, copy the HTML into your page, include shailstack-modal.css in <head>, and add shailstack.js before </body>. Connect any button to a modal ID to trigger it.
<link rel="stylesheet" href="https://cdn.shailstack.com/shailstack-modal.css" /><script src="https://cdn.shailstack.com/shailstack.js" defer></script>New in v2 — no extra JavaScript needed
- Variants:
.shail-top,.shail-corner,.shail-lightbox, and.side-modal.shail-left - Sizes on the content box:
.shail-sm,.shail-lg,.shail-xl - Open from any button:
<button data-modal-open="my-modal"> - Auto-open:
data-open-delay="5000"ordata-exit-intenton the modal (once per visit) - Brand colour:
:root { --shail-accent: #ff1654; --shail-accent-dark: #7f0b2a; } - Keyboard ready: focus moves into the popup and back, Tab stays inside, Esc closes
Basic Modal
A basic popup modal example for alerts, confirmations, and simple messages. Lightweight, responsive, and easy to use.
Side Modal
A side popup modal that slides in smoothly for notifications, menus, and announcements without blocking content.
Fullscreen Modal
A fullscreen popup modal designed for immersive content, forms, and focused user interactions across devices.
Animated Modal 🎁 Free during launch
An animated popup modal with smooth open and close transitions using lightweight CSS and JavaScript.
Multi-Step Modal 🎁 Free during launch
A multi-step popup modal ideal for onboarding, forms, and step-by-step user workflows.
Image/Video Modal 🎁 Free during launch
A media popup modal for image previews and video playback with responsive lightbox support.
Login Modal
A login popup modal for quick user authentication using email and password fields.
Signup Modal
A signup popup modal that allows fast user registration with a clean and distraction-free layout.
Contact Modal
A contact popup modal for inquiries, feedback, and lead generation without page reloads.
Subscribe Modal
A newsletter subscribe popup modal for collecting user emails and growing your audience.
Search Modal
A fast search popup modal for quick navigation, commands, and content discovery.
Bottom Sheet Modal
A mobile-friendly bottom sheet popup modal that slides up smoothly from the screen bottom.
Authentication Popup
A secure authentication popup modal to connect accounts with an authenticator app.
Success Modal
A success popup modal to confirm completed actions and reassure users instantly.
Congratulations Modal
A congratulation popup modal to celebrate user achievements and milestones.
Delete Modal
A delete confirmation popup modal to prevent accidental data removal.
Payment Method Modal
A payment method popup modal to add, select, or manage payment options securely.
Left Drawer
A side panel that slides in from the left — ideal for navigation menus, filters and settings.
Top Announcement
A banner-style popup that drops in from the top for launches, offers and important notices.
Cookie Consent (Corner)
A small corner popup that leaves the page usable — perfect for cookie consent and gentle prompts.
Image Lightbox
A dark, distraction-free viewer for product photos, screenshots and galleries.
Confirm Dialog (Small)
A compact yes/no dialog using the .shail-sm size — for confirmations that need a quick answer.
Exit-Intent Offer
Opens automatically when the visitor moves to leave the page, once per visit. Add data-exit-intent — no extra JavaScript.
Feedback & Rating
Ask visitors to rate their experience with keyboard-friendly CSS stars and an optional comment — great after a purchase or download.
Select Plan Modal
A pricing plan popup modal for selecting and managing subscription plans easily.
Modal Title
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Set up Two-Factor Authentication
Scan the QR code with Google Authenticator, then enter the 6-digit code.
