Modal Popup

This Modal Popup widget lets you make little popup windows appear when you do something specific on your website. You can show information from saved sections, AE templates, or by writing your own content. You can also add buttons as images or text. You have the power to make the popup window look the way you want using features like the overlay. It’s a handy widget to create interactive and customizable popups on your website.

Content

Content

• Content-Type: Choose the type of content you want to display in the popup window, like Custom Content, Saved Page, Saved Section, or AE Template.
• Preview Modal Popup: If you want to preview the pop window, you can enable it.
• Title: Give a Title to be displayed at the top of the popup window.
• Content: Enter content manually or select the source of the Content-Type that you choose on the top accordingly.

Modal Setting

• Modal Width: Here, you can assign the width to the pop-up window.
• Modal height: You can assign the height to the pop-up window here.
• Effect: Choose from the list of effects.
• Overlay Color: It allows you to choose the color for the overlay.

Display settings

• Button Text: Here, you can give the text to the Model Popup button.
• Alignment: You can adjust the positioning of the button (left, center, right, justified).
• Icon: Select an icon to be displayed along with the button text.
• Icon Position: Adjust the position of an icon like before or after the text accordingly.
• Icon Spacing: Adjusted the space between the icon and the text.

Style

Popup

Title

• Color: Choose the popup text color
• Background Color: Select the popup background-color
• Padding: Adjust the padding around the popup
• Typography: Set the typography settings of the title

Content

• Color: Select the color for the popup text
• Background Color: Select the background color
• Padding: Adjust the content padding
• Typography: Set the typography settings of the content
• Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
• Border Radius: Set the border radius to control corner roundness for each side of the popup
• Box Shadow: Adjust box-shadow options

Button

• Typography: Set the typography options for the button’s text
• Text Color: Choose the color of the button’s text
• Text Shadow: Apply shadow to the button text
• Background Color: Choose the background color of the button
• Border Radius: Set the border radius of the button to control corner roundness

Close Button

• Button Inside: Enable it to position the close button inside the popup window.
• Icon: Select an icon to close the popup.
• Icon Size: Adjust the icon size.
• Color: Select the Close button for both the Normal and Hover states.
• Position Top: Adjust the close icon position from the top.
• Position Right: Adjust the close icon position from the right side.

Check out the Demo Page of Modal Popup.