Component Library

Popup Component

Accessible dialog system for video, images, forms, and custom content. Explore 10 live configurations — each one a different way to trigger and style a popup.

10 Examples
3 Integration methods
WCAG Accessible
Media Component

Video Popup Autoplay

Renders an oEmbed video (YouTube) inside a popup using the efr_render_component('media') helper. Defaults: inside close button, no padding, 1200px max width.

Trigger efr_render_component('media', ['popup' => 'video-popup-simple'])
Aspect Ratio 16 : 9
Close Button Inside
Padding No
Max Width 1200px
Open Popup
Media Component

Video Popup (Custom Options)

Same oEmbed video with custom options — outside close button, 800px max width, and no padding.

Trigger efr_render_component('media', ['popup' => ['id' => '...', 'options' => [...]]])
Max Width 800px
Close Button Outside
Padding No
Open Popup
Media Component

Image Popup

Lightbox-style image popup via media_type => 'image'. Close button positioned inside for a cleaner overlay.

Trigger efr_render_component('media', ['popup' => ['id' => 'image-popup', ...]])
Max Width 800px
Close Button Inside
Padding No
Open Popup
Manual (start/end)

Contact Form

Complete contact form in a narrow 480px dialog — ideal for focus-trapped form interactions.

Trigger efr_start_popup('contact-form-popup', [options])
Max Width 480px
Close Button Inside
Padding Yes
Open Popup
Manual (start/end)

Image Gallery

Three-column image grid with no padding for an edge-to-edge gallery at 900px wide.

Trigger efr_start_popup('gallery-popup', [options])
Max Width 900px
Close Button Inside
Padding No
Open Popup
Manual (start/end)

Newsletter Signup

Compact 400px capture dialog with centred layout and outside close button.

Trigger efr_start_popup('newsletter-popup', [options])
Max Width 400px
Close Button Outside
Padding Yes
Open Popup
Manual (start/end)

Long Content / Terms

Scrollable popup with min_height: 500px — structured sections with accept/decline CTAs.

Trigger efr_start_popup('large-content-popup', [options])
Max Width 680px
Min Height 500px
Close Button Inside
Open Popup
Manual (start/end)

Minimal (No Close Button)

Compact notice with close_button => false. Dismiss via overlay click or Esc.

Trigger efr_start_popup('minimal-popup', [options])
Max Width 320px
Close Button None
Dismissal Overlay / Esc
Open Popup
Manual (start/end)

Full Width

Immersive 1200px full-bleed image with inside close button overlaying the media.

Trigger efr_start_popup('fullwidth-popup', [options])
Max Width 1200px
Close Button Inside
Padding No
Open Popup
Fullscreen

Fullscreen

Viewport-covering takeover with fullscreen => true. Ignores max_width entirely.

Trigger efr_start_popup('fullscreen-popup', ['fullscreen' => true])
Fullscreen Yes
Close Button Inside
Padding No
Open Popup