[raw]

[modal-link name="modal1"]Text link to show Modal Window[/modal-link]

Open Modal by Text link

This is the picture link to open custom modal window. Click on the icon to show the content of this Modal Window.

[frame bgcolor="#f2f2f2" version="light"]
[code][modal-link name="modal1"]Text link to show Modal Window[/modal-link][/code]
[/frame]
[/raw]

[raw]

[modal-link name="modal1"][/modal-link]

Open Modal by Picture or Icon link

This is the standard text link to open custom modal window. Click on the link to show the content of this Modal Window.

[frame bgcolor="#f2f2f2" version="light"]
[code][modal-link name="modal1"]<img src="...">[/modal-link][/code]
[/frame]
[/raw]

[raw]

Open Modal by Button link

This is the button created by shortcode to open custom modal window. Click on the button to show the content.

[frame bgcolor="#f2f2f2" version="light"]
[code][button title="OPEN" modalname="modal1" description="Modal Window"
width="100%" version="light" position="left" bgcolor="#5FCAFF"
color="#FFFFFF"][/code]
[/frame]
[/raw]

 

Modal Window Content

You need to define the Modal Window Content somewhere on the end of the page to create something like this. You can define several modal windows and call them by the name parameter.

[raw]
[frame bgcolor="#f2f2f2" version="light"]
[code][modal-content name="modal1" width="600px" height="550px"]
Content
[/modal-content]
[/code]
[/frame]
[/raw]

[raw]
[modal-content name="modal1" width="600px" height="550px" ]

Modal Window

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[image]

Impression Preview

[/image]

[/modal-content]
[/raw]