Dialog Box Popup

 

Dialog box is another type of popup which is displaying on the pages like a box with some content.
It has 2 sections, a title and a body. It has draggable and sliding options.
The settings for the dialog box are given below.
First you can enter the name of the popup and display layout “Dialog Box”
 
XYZ Popup-Dialog Box 1 
 
Title Settings
 
We can enter the dialog box title and its settings here.
 
XYZ Popup-Dialogbox title settings
 
Title : We can enter the title of the dialog box here.
Title font size : This is the font size of the title.
Title color : We can select the Title font color  here with the help of color picker.
 
Content
 
We can enter the dialog box content here. If we want to display the referrer messages, that option is also available here.
 
XYZ Popup-Dialogbox content
Show referrer URL based messages? yes/no : To show referrer messages in dialog box, select ‘yes’. Otherwise, select ‘No’.
Content : Enter your dialog box content here.
 
Position Settings
 
The position settings are same as that of Lightbox settings.
There are 2 options for positioning the dialog box, predefined settings and manually edit settings.
In the predefined settings, you can select one position from the predefined 9 positions.
 
XYZ Popup-Dialogbox position 1
You can place the dialog box in the top left corner of the webpage, on left center, on bottom left corner, on bottom center, on bottom right corner, on right center, on top right corner, on top center and the absolute center of the webpage.
Also you can set the height and width of the dialog box in percentage as well as in pixel values.
In the manually edit position setting, you can select the display position.
 
XYZ Popup-Dialogbox position 2
The 4 display positions in the manually edit settings are top left, top right, bottom left and bottom right.
For the top left position, you can set the top coordinate and left coordinate. Top coordinate is the distance of the lightbox from top of the webpage and left coordinate is the distance from left side of the webpage.
The width and height are same as that in the predefined position settings.
 
Effect settings

These are the effects available in the dialog box.
 
XYZ Popup-Dialogbox Effect
Draggable option : If you select the option yes, users can drag the dialog box in the webpage from one location to other.
Slidable option : This is the option of sliding the dialog box from outside the webpage to the selected position.
Slider starting position : This is the starting position of slider. There are 4 options, top,left,right,bottom.
If the selected option is top, the dialog box slider starts from top and stops in the selected position.
 
Display Logic Settings
 
This section allows us to select the dialog box display logic.
We can display the dialog box based on delay, number of pages browsed or both.
 
dialog box display logic – This is the logic, how to display the dialog box in our webpages.
There are 3 options.
1. Based on delay
 
 
XYZ Popup-Dialogbox display 1
In the “Based on delay” logic, the dialog box will appear after a delay.
You can set the time for this delay.
In the section “Delay in seconds before rendering” you can enter the delay in seconds. If it is “0(zero)” the dialog box will appear without any delay.
 
2. Based on number of pages browsed
 
XYZ Popup-Dialogbox display 2
 
In the “Based on number of pages browsed” logic, the dialog box will appear after the user browsing some pages entered in “Number of pages to browse before rendering“.
 
3. both
 
XYZ Popup-Dialogbox display 3
 
In the “both” option, the dialog box will appear after a particular delay and after the user browsed some pages.
Also if the dialog box content is larger than the window, we can hide the extra content or allow a scrollbar.
You can select your option for “If content is larger than window?”
 
XYZ Popup-Dialogbox display 4
Target Device – You can target the lightbox in your website for users using different devices. The possible devices are desktop/laptop and mobile/tablet. You can select the target devices here.
If you have selected all devices, the lightbox will display if viewed from all these devices. Display trigger – We can display the dialog box on loading of the page or when clicking a location/element in a page.
When we select “On Load”, the dialog box will appear when the loading of the page completed.
If the selected trigger is “On Click”, the dialog box will appear only when the user click on the page based on the trigger element.
 
XYZ Popup-Dialogbox display 5
There is an option Display onclick trigger method.
You can select any one of the options here, “on first click” or “on every click”.
If you select the value “on first click”, the dialog box will appear only on the first click in the element.
If the selected option is “on every click”, the dialog box will appear on every click on the element.
Trigger Element- If you leave this empty, dialog box will trigger when anyone clicks on body.
Otherwise you can specify the element which when clicked must trigger dialog box.
You can specify any of the formats given below.
 
tagname => eg: img
classname => eg: .myclass
id => eg: #myid
If you are using a tag name, the dialog box will triggered when the user clicked on the element with the tagname.
The same is with the class and id.
Repeat interval for a user – This is the dialog box repeat interval. If you want to display the dialog box only after 30 minutes from the first display, you can enter that value here.
If this value is 0(zero), the dialog box will appear on every trigger.
 
 
XYZ Popup-Close button 
 
Close button option – You can display the close button with the dialog box if you are selecting the ‘yes’ option.
If you are selected the option ‘No’, it will not display a close button.
Close button Image – You can upload a close button image here.
Close button appearance position – There are 4 positions for displaying the close button.
Top right, top left, bottom right and bottom left. You can select any position from the dropdown menu.
Display as iframe – We can display the dialog box in iframe or in the same page.
If you are using the iframe, any link in the dialog box or buttons will open in the same dialog box.
To open a link in a window outside the dialog box or to use a social media button, please disable the iframe display.
 
Style Settings
 
Here we can select the style of the dialog box.
 
XYZ Popup-Dialogbox style
Z index – Z index determines whether the dialog box should display under or above the pages.
As the value of z index increases, the dialog box become on top(above) of all page contents.
Popup Theme – You can select a theme from the dropdown list.
Background color – We can select the dialog box background using a color picker.
Popup Opacity (0-100) – This is the opacity level of the popup. If the value of opacity is ’0′, the popup should be a transparent one. If the value is ’100′, the popup should be opaque.
Border color – This is the color of the dialog box border and title background.
Border width – We can set the width/thickness of the dialog box border here.
Border radius – If you want a rounded corner for the lightbox, use this oprion. As the radius increases, the roundness also increases. Use ’0′ for rectangular edges.
 
Now click on the Create button and it will create a javascript code.
Please copy this code and place in a page where you want to display the dialog box.
 
 
Previous : Lightbox Popup                                                      Next : Full Page Popup
 

—————————————————————————————————————————————————-

Please Contact Us if you have any questions or suggestions.

Visit XYZScripts.com  -  Official Blog  -  Knowledge Base  -  Documentation

Join us on Facebook  -  Twitter  -  Google +