Popup Modal Generator

Trigger Type

Button Settings

Button Text

Background Color

Text Color

Font Size

Font Family

Padding

Border Radius

Border

Hover Effects

Hover Background Color

Hover Transform

Time Delay Settings

Delay (seconds)

Popup will appear after this many seconds

Scroll Position Settings

Scroll Percentage

10% 50% 100%

Popup will appear when user scrolls this percentage down the page

Exit Intent Settings

Exit Intent Detection: The popup will appear when the user moves their mouse towards the browser's close button or address bar, indicating they might leave the page.

Enable exit intent detection

Page Views Settings

Number of Page Views

Popup will appear after the user has viewed this many pages

Note: This feature uses localStorage to track page views. The counter will reset if the user clears their browser data.

Width

Use px, %, vw, or auto

Height

Use px, %, vh, or auto

Max Width

Max Height

Position

Border Radius

Background Color

Border

Example: 1px solid #dee2e6

Box Shadow

Example: 0 4px 20px rgba(0,0,0,0.15)

Animation Settings

Animation In

Animation Out

Animation Duration

Use seconds (s) or milliseconds (ms)

Interaction Settings

Close with ESC key

Close when clicking overlay

Background Overlay Settings

Overlay Background

Use color, gradient, or rgba values

Backdrop Filter

Header / Title Bar

Show header/title bar

Title

Font Size

Font Family

Font Weight

Text Color

Background Color

Padding

Border Bottom

Show close button in header

Content Area

Content HTML

You can use HTML tags like <p>, <img>, <a>, <button>, etc.

Background Color

Text Color

Font Size

Font Family

Padding

Line Height

Footer Settings

Show footer

Background Color

Padding

Border Top

Text Align

Show close button in footer

Footer Close Button

Button Text

Button Background

Button Text Color

Button Font Size

Button Padding

Button Border Radius

Advanced Styling

Custom CSS Classes

Add custom CSS classes separated by spaces

Custom CSS Styles

Add custom CSS rules that will be included with the generated code

Responsive Settings

Enable responsive behavior

Mobile Width

Width on screens smaller than 768px

Mobile Padding

Content padding on mobile devices

Mobile Font Size

Base font size on mobile devices

Overlay Effects

Animation In

Animation Out

Animation Duration

Use seconds (s) or milliseconds (ms)

Accessibility

Enable accessibility features

Trap focus within popup

Add ARIA labels and roles

High contrast mode support

Popup Generator

Button Settings

Hover Effects

Time Delay Settings

Scroll Position Settings

Exit Intent Settings

Page Views Settings

Animation Settings

Interaction Settings

Background Overlay Settings

Header / Title Bar

Content Area

Footer Settings

Footer Close Button

Advanced Styling

Responsive Settings

Overlay Effects

Accessibility

Live Preview

Sample Page Content

Popup Generator

Button Settings

Hover Effects

Time Delay Settings

Scroll Position Settings

Exit Intent Settings

Page Views Settings

Animation Settings

Interaction Settings

Background Overlay Settings

Header / Title Bar

Content Area

Footer Settings

Footer Close Button

Advanced Styling

Responsive Settings

Overlay Effects

Accessibility

Live Preview

Sample Page Content

Import Template

Generated Code