Summary

  • Overview
  • Video Lesson
  • Modal Popup Panel
  • Add Modal Popup
  • Add Elements to Modal Popup
  • Manage Modal Popups
  • Navigation To Page Blocks
  • Modal Popup Properties
  • Responsive Modes

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

Video Lesson

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

When you add a Modal Popup, edit it, and exit the editing mode, we show a dialog, offering you the option to add a button.

modal-popup-linked-button.gif

This Button will be automatically linked to the added Modal Popup Element, which improves its usability and speeds up your work.

modal-popup-button.png

Add Elements to Motol Popup

Click the small round Add Plus in the center of the Modal Popup to edit Elepanel's

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

The navigation shows the Bloсks when the Modal Popup Mode is active. You can easily switch between the Modal Popup and Blocks.

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

You can access the Modul Popups used in Blocks by clicking the links in the Page Navigator, which also allows you to easily access the Modul Popup Editor.

link-modal-popups.png

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

For Modal Popups, you can find the Popup button to open the linked Modal Popup.

modal-popup-link-settings.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

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

You can specify the Site Pages on which the Modal Popup will appear for the On-Timer and On-Page Exit Options.

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.

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 and set its 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 and modifying its properties in the Property Panel.

modal-popup-close-button.png

Modal Shading

You can also edit the Shading of the Modal Popup by setting the properties in the Property Panel.

modal-popup-shading.png

Exit Modal Popup Mode

Click the Back Button to exit the Modal Popup Edit Mode.

close-modal-popup-mode.png

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

modal-popup-in-responsive-mode.png

## Summary - Overview - Video Lesson - Modal Popup Panel - Add Modal Popup - Add Elements to Modal Popup - Manage Modal Popups - Navigation To Page Blocks - Modal Popup Properties - Responsive Modes ## 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! ## Video Lesson <iframe width="600" height="320" src="https://www.youtube.com/embed/JDw8Hik1EE0" title="Nicepage Lessons: Modal Popup" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> ## 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! When you add a Modal Popup, edit it, and exit the editing mode, we show a dialog, offering you the option to add a button. !modal-popup-linked-button.gif! This Button will be automatically linked to the added Modal Popup Element, which improves its usability and speeds up your work. !modal-popup-button.png! ## Add Elements to Motol Popup Click the small round Add Plus in the center of the Modal Popup to edit Elepanel's !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 The navigation shows the Bloсks when the Modal Popup Mode is active. You can easily switch between the Modal Popup and Blocks. !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! You can access the Modul Popups used in Blocks by clicking the links in the Page Navigator, which also allows you to easily access the Modul Popup Editor. !link-modal-popups.png! 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! For Modal Popups, you can find the Popup button to open the linked Modal Popup. !modal-popup-link-settings.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 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 You can specify the Site Pages on which the Modal Popup will appear for the On-Timer and On-Page Exit Options. !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 and set its 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 and modifying its properties in the Property Panel. !modal-popup-close-button.png! ### Modal Shading You can also edit the Shading of the Modal Popup by setting the properties in the Property Panel. !modal-popup-shading.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! ##