HTML Template with Modal Popup

Modal Types Included in UIXDraft Templates

Dialog Modal

Confirmation Dialogs

Delete confirmation, action approval and alert modals with customizable buttons and icon support.

Lightbox

Image Lightbox

Gallery lightbox with keyboard navigation, swipe support, and image captions. Opens any img element on click.

Video Modal

Video Embed Popup

YouTube or Vimeo embed that opens in a centered modal. Pauses video automatically on close.

Form Modal

Contact & Sign-up Forms

Accessible Modal Best Practices (Built In)

Focus Trap

Tab key cycles only through focusable elements inside the open modal. Users can't accidentally interact with background content.

Escape Key to Close

Press Escape to dismiss any modal. Standard browser behavior users expect — don't make them hunt for a close button.

ARIA Attributes

role="dialog", aria-modal="true", aria-labelledby and aria-describedby are set automatically on open.

Backdrop Click to Dismiss

Clicking the semi-transparent overlay closes the modal. A UX pattern users understand intuitively.

Scroll Lock

Body scroll is locked while the modal is open, preventing confusing background scroll on mobile.

Modal Implementation — Vanilla JS vs Libraries

Approach	Vanilla JS (UIXDraft)	Bootstrap Modal	SweetAlert2
Bundle size	~1.5 KB	~45 KB Bootstrap	~36 KB
Dependencies	Zero	Bootstrap + Popper	SweetAlert2
Accessibility	Full ARIA + focus trap	Good	Good
Custom styling	Edit CSS variables	Override Bootstrap classes	Limited theming

Modal JavaScript — How It Works

// Open a modal by ID
function openModal(id) {
  const modal = document.getElementById(id);
  modal.style.display = 'flex';
  modal.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'hidden';
  trapFocus(modal);
}
// Close on Escape key
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') closeModal();
});

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

Do UIXDraft templates include accessible modal dialogs?

Yes. Every modal in UIXDraft templates has focus trapping, Escape-key dismissal, ARIA attributes and backdrop-click-to-close — fully WCAG 2.1 AA compliant.

Is jQuery required for the modal functionality?

No. All modals use vanilla JavaScript — no jQuery, no Bootstrap, no external libraries. The JS is under 2 KB and works in all modern browsers.

Can I use the modal template for video embeds?

Yes. The video modal variant embeds YouTube or Vimeo via an iframe that starts loading only when opened and pauses automatically on close.

Does the modal work on mobile?

Yes. Modals are fully responsive — they fill the screen on small devices and center in a fixed container on desktop. Touch swipe-to-dismiss is supported.

Can I trigger a modal from any button or link?

Yes. Add a data-modal attribute to any element and the JS opens the corresponding modal by ID. No additional code required.

HTML Templates with Modal Popups