The Ultimate Toolbox for creating
amazing web sites!
A dialog is a floating window that contains a title bar and a content area. This is an attractive way to display a 'popup window' with important information. A dialog can also be used as form.
WYSIWYG Web Builder has built-in support for 2 types of dialogs:
• jQuery UI, this uses the jQuery UI Dialog script.
• Bootstrap, this uses Bootstrap's Modal script.
How to create a one-time popup?
The 'Cookie Expire Days' property can be used to create a dialog that is only display once. A cookie is stored on the visitor’s browser to only show the dialog once across multiple visits. Use '0' to disable cookie functionality.
jQuery UI dialog is based on themeroller themes and requires jQuery and jQuery UI, which makes it a pretty 'heavy-weight' solution. But it still works with all browsers and if you like the way jQuery UI themes look then then this may be a nice way to show a dialog on your website.
Bootstrap's modal does not use jQuery or jQuery UI for rendering and is therefor a light-weight widget.
It has a slightly different appearance, but most features are the same as the jQuery UI version.
How to add objects to the dialog?
You can easily add objects to the dialog by dragging them on the widget. This works the same way as for layers or forms.
To be able to drag & drop objects to the dialog, first make sure it's large enough so the objects can be dragged on it (the dialog object should be larger than the object you're adding). A blue border around the dialog indicates that the dragged object will be come part of the dialog.
The dialog supports many generic properties like background, colors. font etc.
Here's an overview of some properties that are specific to the dialog.
Specifies the title of the dialog.
Show / hide animation
Specifies where the dialog should be displayed: ‘left’, ‘center’, ‘right’.
Select ‘Absolute position’ to use the current x position in the workspace.
Specifies where the dialog should be displayed: ‘top’, ‘center’, ‘bottom’.
Select ‘Absolute position’ to use the current y position in the workspace.
How to implement 'do not show this popup again' functionality?
Because this needs interaction with a 'checkbox', this requires some custom script. This example uses a Bootstrap dialog.
Add a checkbox to the dialog. Set the ID of the object to: privacyPopup (this is also used in the code below!)
Add an HTML object. Set the type to 'Between <head></head> tags' and copy/paste this code:
document.cookie = "privacynotice=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
If enabled, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.
Display Close Button
Specifies whether to display the 'Close' button in the title bar.
Close on escape
Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.
Show dialog automatically
When this option is enabled the dialog will open automatically when dialog is called. Otherwise it will stay hidden until .dialog("open") is called on it.