Summary

  • Overview
  • Opening Modal Popup Panel
  • Adding and Deleting Modal Popups
  • Showing Modal Popups
    • On Button Click
    • Linking to Modal Popup
    • On Timer
    • On Page Exit
  • Closing on Form Submit and Button Click
  • Modal Popup
    • Position and Size
    • Close Button
    • Screen Dimming
  • Adding Elements
  • Managing Modal Popups
  • Renaming Modal Popups
  • Exiting Modal Popup Mode
  • Modal Popup in Responsive

Modal Popup Overview

Use the Modal Popup Element to create modal dialog windows on your websites. You can see the Modal Popup Panel that helps you work with the Modal Popups, especially when you have many of them and need careful management and convenience.

You can click the Names to switch the Modal Popups, and the Panel stays open.

modal-popup-panel.gif

Opening Modal Popup Panel

Open the Modal Popup Panel from the Theme Menu on the Top Bar.

accessing-modal-popups.png

You can also open the Panel to manage Modal Popups from the Add Elements.

manage-modal-popups-add-menu.png

Adding and Deleting Modal Popups

You can add the new Modal Popup in the Panel by clicking either the link at the bottom of the list or the icon at the Panel's top.

adding-modal-popup.png

To delete a Modal Popup, click the Bucket Icon near the Name in the Modal Popup's line.

deleting-modal-popup.png

Modal Popup Search

Enter the letters of the Name to search for Modal Popups in the Panel. It is handy if you have tens of different Popups.

modal-popup-search.png

Showing Modal Popups

You can specify the event for showing the Modal Popup on Button Click, Timer, and Page Exit.

Modal Popup On Button Click

You can set the Button or Hyperlink to open the Modal Popup on a page for the click.

modal-popup-click-button.gif

Select the Modal Popup option in the Edit Link dialog.

open-modal-popup-with-click-on-button-link.gif

You can also search for the needed Modal Popup in the Edit Link Dialog.

search-for-page-in-edit-link-dialog.png

Or add a new Modal Popup directly from the Edit Link Dialog.

add-modal-popup-from-edit-link-dialog.png

Modal Popup On Timer

Now you can also show the Modal Popup dialog after some specified time.

modal-popup-show-on-timer-and-on-page-exit.png

Modal Popup On Page Exit

You can show the Modal Popup when a website's visitor moves a mouse to close the browser tab.

modal-popup-show-on-page-exit.gif

Selecting Pages Where to Show Modal Popups

You can also specify pages on which you will show the Modal Popup both for the On-Timer and On-Page-Exit options.

modal-popup-select-page.png

Closing on Form Submit and Button Click

Modal Popup will close after you press any button on the dialog. For example, if you click the Submit Button on a form or any other Button, the Modal Popup will close automatically.

modal-popup-submits-form-and-closes.gif

Modal Popup

Size, Alignment, and Position

You can resize the Modal Popup Element. It is not possible to change the Element's position in the Preview. However, you can select the Block Tab in the Property Panel and set the Alignment options to place the Modal Popup on the screen's left top, for example.

modal-popup-position.png

Use the Position property to place the Modal Popup Dialog on the screen.

modal-popup-poistion.gif

Use the Horizontal and Vertical Alignment to positions Elements inside the Modal Popup.

modal-popup-align.gif

Close Button

You can stylize the Close icon by selecting it and modifying its properties in the Property Panel.

modal-popup-properties.png

Screen Dimming

And you can also edit the dimming for the Modal Popup setting the properties in the Block Tab of the Property Panel.

modal-popup-properties-bg.png

Adding Elements to Modal Popup

Click the small round Add Plus in the center of the Modal Popup to start editing Elements.

adding-element-to-modal-popup.png

Managing Modal Popups

You can have several Modal Popups in the Project. You can find the list of the used Popups in the Theme -> Modal Popups menu in the Top Bar. You can also delete any Modal Popup by clicking the Bucket icon.

delete-modal-popup.gif

Modal Popups in Add Element

Besides the Theme -> Modal Popups, we have also added the Modal Popups list to the Add Elements.

modal-popup-list-in-add-element-menu.png

Modal Popups in Outline Tab

You can see the Elements of the Modal Popup in the Outline Tab.

modal-popup-outline.png

Renaming Modal Popups

You can rename Modal Popups in the Theme -> Modal Popup List to distinguish them.

change-modal-popup-name.png

Exiting Modal Popup Mode

Click the Button above the Modal Popup Element or select a block in the Page Navigator to finish editing the Modal Popup.

close-modal-popup-mode.png

Modal Popup in Responsive

You can set the Modal Popup for each Responsive Mode similar to all other Elements.

modal-popup-in-responsive-mode.png

Custom PHP in Modal Popups

There is the support for the Custom PHP Element in the Modal Popups.

custom-php-modal-popup.gif

## Summary - Overview - Opening Modal Popup Panel - Adding and Deleting Modal Popups - Showing Modal Popups - On Button Click - Linking to Modal Popup - On Timer - On Page Exit - Closing on Form Submit and Button Click - Modal Popup - Position and Size - Close Button - Screen Dimming - Adding Elements - Managing Modal Popups - Renaming Modal Popups - Exiting Modal Popup Mode - Modal Popup in Responsive ## Modal Popup Overview Use the Modal Popup Element to create modal dialog windows on your websites. You can see the Modal Popup Panel that helps you work with the Modal Popups, especially when you have many of them and need careful management and convenience. You can click the Names to switch the Modal Popups, and the Panel stays open. !modal-popup-panel.gif! ## Opening Modal Popup Panel Open the Modal Popup Panel from the Theme Menu on the Top Bar. !accessing-modal-popups.png! You can also open the Panel to manage Modal Popups from the Add Elements. !manage-modal-popups-add-menu.png! ## Adding and Deleting Modal Popups You can add the new Modal Popup in the Panel by clicking either the link at the bottom of the list or the icon at the Panel's top. !adding-modal-popup.png! To delete a Modal Popup, click the Bucket Icon near the Name in the Modal Popup's line. !deleting-modal-popup.png! ## Modal Popup Search Enter the letters of the Name to search for Modal Popups in the Panel. It is handy if you have tens of different Popups. !modal-popup-search.png! ## Showing Modal Popups You can specify the event for showing the Modal Popup on Button Click, Timer, and Page Exit. ### Modal Popup On Button Click You can set the Button or Hyperlink to open the Modal Popup on a page for the click. !modal-popup-click-button.gif! Select the Modal Popup option in the Edit Link dialog. !open-modal-popup-with-click-on-button-link.gif! You can also search for the needed Modal Popup in the Edit Link Dialog. !search-for-page-in-edit-link-dialog.png! Or add a new Modal Popup directly from the Edit Link Dialog. !add-modal-popup-from-edit-link-dialog.png! ### Modal Popup On Timer Now you can also show the Modal Popup dialog after some specified time. !modal-popup-show-on-timer-and-on-page-exit.png! ### Modal Popup On Page Exit You can show the Modal Popup when a website's visitor moves a mouse to close the browser tab. !modal-popup-show-on-page-exit.gif! ### Selecting Pages Where to Show Modal Popups You can also specify pages on which you will show the Modal Popup both for the On-Timer and On-Page-Exit options. !modal-popup-select-page.png! ## Closing on Form Submit and Button Click Modal Popup will close after you press any button on the dialog. For example, if you click the Submit Button on a form or any other Button, the Modal Popup will close automatically. !modal-popup-submits-form-and-closes.gif! ## Modal Popup ### Size, Alignment, and Position You can resize the Modal Popup Element. It is not possible to change the Element's position in the Preview. However, you can select the Block Tab in the Property Panel and set the Alignment options to place the Modal Popup on the screen's left top, for example. !modal-popup-position.png! Use the Position property to place the Modal Popup Dialog on the screen. !modal-popup-poistion.gif! Use the Horizontal and Vertical Alignment to positions Elements inside the Modal Popup. !modal-popup-align.gif! ### Close Button You can stylize the Close icon by selecting it and modifying its properties in the Property Panel. !modal-popup-properties.png! ### Screen Dimming And you can also edit the dimming for the Modal Popup setting the properties in the Block Tab of the Property Panel. !modal-popup-properties-bg.png! ## Adding Elements to Modal Popup Click the small round Add Plus in the center of the Modal Popup to start editing Elements. !adding-element-to-modal-popup.png! ## Managing Modal Popups You can have several Modal Popups in the Project. You can find the list of the used Popups in the Theme -> Modal Popups menu in the Top Bar. You can also delete any Modal Popup by clicking the Bucket icon. !delete-modal-popup.gif! ### Modal Popups in Add Element Besides the Theme -> Modal Popups, we have also added the Modal Popups list to the Add Elements. !modal-popup-list-in-add-element-menu.png! ### Modal Popups in Outline Tab You can see the Elements of the Modal Popup in the Outline Tab. !modal-popup-outline.png! ## Renaming Modal Popups You can rename Modal Popups in the Theme -> Modal Popup List to distinguish them. !change-modal-popup-name.png! ## Exiting Modal Popup Mode Click the Button above the Modal Popup Element or select a block in the Page Navigator to finish editing the Modal Popup. !close-modal-popup-mode.png! ## Modal Popup in Responsive You can set the Modal Popup for each Responsive Mode similar to all other Elements. !modal-popup-in-responsive-mode.png! ## Custom PHP in Modal Popups There is the support for the Custom PHP Element in the Modal Popups. !custom-php-modal-popup.gif! ##