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

## 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! ##