v1.2
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
SurePopup
Converts any Bricks element into a beautiful modal popup with smooth animations and backdrop blur. Features 9 animation styles including scale, slide, fade, zoom, and 3D flip effects. Preserves all original element styles including flexbox layouts, gaps, and paddings. Automatically adds a close button and supports keyboard (ESC) and outside-click dismissal. Perfect for product quick views, forms, announcements, or any content you want to display in an overlay.
Click to see the modal in action
Quick View
This is how your popup will look with the scale-center animation and backdrop blur effect.
Animation
Choose how the modal enters the screen. Options include: scale-center (grows from center), slide-top/bottom/left/right (slides from edge), fade (opacity only), zoom-out (shrinks from larger), flip-horizontal/flip-vertical (3D rotation effect).
Default: scale-center
How long the open/close animation takes. Shorter feels snappy, longer feels smooth and elegant. 0.3 is a good balance.
Default: 0.3
Starting scale for scale-center animation. Lower values create a more dramatic "pop" effect. Only applies to scale-center animation type.
Default: 0.95
Vertical offset for scale-center animation. Adds a subtle upward motion as the modal opens. Only applies to scale-center animation type.
Default: 10
Animation curve that controls acceleration. The default cubic-bezier creates a natural, slightly bouncy feel. Use "ease" for simpler motion.
Default: cubic-bezier(0.16, 1, 0.3, 1)
Backdrop
Darkness of the overlay behind the modal. 0 is transparent, 1 is solid black. Lower values let the page show through more.
Default: 0.2
Amount of blur applied to the background content. Creates a modern frosted glass effect. Use 0 for no blur, 10+ for heavy blur.
Default: 6
Appearance
Corner rounding for the modal container. Higher values create softer, more modern appearance. Use 0 for sharp corners.
Default: 12
Maximum height of the modal as percentage of screen height. Content scrolls if it exceeds this. Prevents modal from being taller than the screen.
Default: 85
Close Button
Size of the close button. Larger is easier to tap on mobile but takes more visual space. 30-40px works well for most designs.
Default: 30
Distance from the top edge of the modal to the close button. Adjust based on your modal's padding.
Default: 10
Distance from the right edge of the modal to the close button. Adjust based on your modal's padding.
Default: 10
Behavior
Allow closing the modal by clicking the backdrop. Turn off if you want users to explicitly use the close button or complete an action first.
Default: On
Allow closing the modal with the Escape key. Recommended for accessibility and user convenience. Turn off for mandatory modals.
Default: On
Performance
This element uses CSS transforms and transitions for smooth 60fps animations. The backdrop blur uses hardware-accelerated backdrop-filter. Body scroll is locked when modal is open to prevent background scrolling. Original element styles (flexbox, gaps, padding) are preserved when moved to modal container. Uses MutationObserver for Bricks builder compatibility.