Summary
- Overview
- Open Modal Popup Panel
- Add Modal Popups
- Add Elements to Modal Popup
- Manage Modal Popups
- Search Modal Popup
- Modal Popup Options
- Delete Modal Popups
- Navigation To Page Blocks
- Show Modal Popup
- Modal Popup On Button Click
- Modal Popup On Timer
- Modal Popup On Page Exit
- Select Pages For Modal Popup
- Modal Popup Auto-Close
- Modal Popup Properties
- Name
- Size
- Alignment
- Position
- Close Button
- Modal Shading
- Modal Popup In Page Navigator
- Modal Popup In Outline
- Modal Popup In Link Settings
- Exit Modal Popup Mode
- Modal Popup in Responsive
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 and need careful management and convenience.
You can click the Names to switch the Modal Popups, and the Panel stays open.
Open Modal Popup Panel
Click on the Modal Popup Icon on the Quick Access Pane to open the Modal Popup Panel.
You can also open the Panel to manage Modal Popups from the Add Elements.
Add 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.
Add Elements to Modal Popup
Click the small round Add Plus in the center of the Modal Popup to edit Elements.
Manage Modal Popups
You can manage the Modal Popups in the Modal Popup Panel of the Quick Access Pane.
Modal Popup Search
Enter the Name letters to search for Modal Popups in the Panel. It is handy if you have tens of different Popups.
Modal Popup Options
Click on the Options icon for the Modal Popup Name in the Modal Popup Panel to rename, copy and duplicate operations for the current Modal Popup. You can also delete the Modal Popup in the Options.
Delete Modal Popups
To delete a Modal Popup, click the Bucket Icon near the Name in the Modal Popup's line.
Navigation To Page Blocks
You see the navigation showing the Bloсks when the Modal Popup Mode is active. You can switch the Modal Popup and Blocks easily.
Show Modal Popup
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 On Timer
Now you can also show the Modal Popup dialog after some specified time.
Modal Popup On Page Exit
You can show the Modal Popup when a website's visitor moves a mouse to close the browser tab.
Select Pages For Modal Popup
For the On-Timer and On-Page Exit Options, you can specify the Site Pages on which you will show the Modal Popup.
Modal Popup Auto-Close
Modal Popups can 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 Properties
You can edit all properties available for the Modal Popup in the Property Panel.
Name
You can rename the Modal Popup in the Property Panel.
Dimensions
You can resize the Modal Popup Element in the Editor. You can also set the Width and Height in the Property Panel.
Alignment
Use the Horizontal and Vertical Alignment to position Elements inside the Modal Popup.
Position
Use the Position property to place the Modal Popup Dialog on the screen.
Close Button
You can stylize the Close icon by selecting it and modifying its properties in the Property Panel.
Modal Shading
And you can also edit the Shading of the Modal Popup setting the properties in the Property Panel.
Modal Popup in Page Navigator
You can access the Modal Popups used in Blocks by the links in the Page Navigator, allowing you to easily access the Modal Popup Editor.
Modal Popup In Outline
We have added the link to the Modal Popup Element linked to the Button or Hyperlink to the Block Outline. Clicking on the link opens the Modal Popup Mode.
Modal Popup In Link Settings
For Modal Popups, you can find the Popup button to open the linked Modal Popup.
Exit Modal Popup Mode
Click the Back Button to exit the Modal Popup Edit Mode.
Modal Popup in Responsive
You can set the Modal Popup for each Responsive Mode similar to all other Elements.
## Summary
- Overview
- Open Modal Popup Panel
- Add Modal Popups
- Add Elements to Modal Popup
- Manage Modal Popups
- Search Modal Popup
- Modal Popup Options
- Delete Modal Popups
- Navigation To Page Blocks
- Show Modal Popup
- Modal Popup On Button Click
- Modal Popup On Timer
- Modal Popup On Page Exit
- Select Pages For Modal Popup
- Modal Popup Auto-Close
- Modal Popup Properties
- Name
- Size
- Alignment
- Position
- Close Button
- Modal Shading
- Modal Popup In Page Navigator
- Modal Popup In Outline
- Modal Popup In Link Settings
- Exit Modal Popup Mode
- Modal Popup in Responsive
## 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 and need careful management and convenience.
You can click the Names to switch the Modal Popups, and the Panel stays open.
!modal-popup.png!
## Open Modal Popup Panel
Click on the Modal Popup Icon on the Quick Access Pane to open the Modal Popup Panel.
!open-modal-popup-panel.png!
You can also open the Panel to manage Modal Popups from the Add Elements.
!modal-popups-add-panel.png!
## Add 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!
## Add Elements to Modal Popup
Click the small round Add Plus in the center of the Modal Popup to edit Elements.
!adding-element-to-modal-popup.png!
## Manage Modal Popups
You can manage the Modal Popups in the Modal Popup Panel of the Quick Access Pane.
### Modal Popup Search
Enter the Name letters to search for Modal Popups in the Panel. It is handy if you have tens of different Popups.
!modal-popup-search.png!
### Modal Popup Options
Click on the Options icon for the Modal Popup Name in the Modal Popup Panel to rename, copy and duplicate operations for the current Modal Popup. You can also delete the Modal Popup in the Options.
!modal-popup-options.png!
### Delete Modal Popups
To delete a Modal Popup, click the Bucket Icon near the Name in the Modal Popup's line.
!deleting-modal-popup.png!
## Navigation To Page Blocks
You see the navigation showing the Bloсks when the Modal Popup Mode is active. You can switch the Modal Popup and Blocks easily.
!blocks-modal-popup.png!
## Show Modal Popup
You can specify the event for showing the Modal Popup on Button Click, Timer, and Page Exit.
!show-modal-popup.png!
### 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 On Timer
Now you can also show the Modal Popup dialog after some specified time.
### Modal Popup On Page Exit
You can show the Modal Popup when a website's visitor moves a mouse to close the browser tab.
### Select Pages For Modal Popup
For the On-Timer and On-Page Exit Options, you can specify the Site Pages on which you will show the Modal Popup.
!modal-popup-select-page.png!
### Modal Popup Auto-Close
Modal Popups can 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 Properties
You can edit all properties available for the Modal Popup in the Property Panel.
!modal-popup-properties.png!
### Name
You can rename the Modal Popup in the Property Panel.
!rename-modal-popup.png!
### Dimensions
You can resize the Modal Popup Element in the Editor. You can also set the Width and Height in the Property Panel.
### Alignment
Use the Horizontal and Vertical Alignment to position Elements inside the Modal Popup.
### Position
Use the Position property to place the Modal Popup Dialog on the screen.
!modal-popup-position.png!
### Close Button
You can stylize the Close icon by selecting it and modifying its properties in the Property Panel.
!modal-popup-close-button.png!
### Modal Shading
And you can also edit the Shading of the Modal Popup setting the properties in the Property Panel.
!modal-popup-shading.png!
## Modal Popup in Page Navigator
You can access the Modal Popups used in Blocks by the links in the Page Navigator, allowing you to easily access the Modal Popup Editor.
!link-modal-popups.png!
## Modal Popup In Outline
We have added the link to the Modal Popup Element linked to the Button or Hyperlink to the Block Outline. Clicking on the link opens the Modal Popup Mode.
!modal-popup-outline.png!
## Modal Popup In Link Settings
For Modal Popups, you can find the Popup button to open the linked Modal Popup.
!modal-popup-link-settings.png!
## Exit Modal Popup Mode
Click the Back Button to exit the Modal Popup Edit Mode.
!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!
##