Popup Dialog Box

Dialog box is one type of popup which is displaying on the pages like a box with some content.

To access the Popup Dialog Box plugin, go to the wp-admin area. 

In the left menu of admin area you can see “XYZ Popup Dialog Box” menu.

 Popup Dialog Box

There are 3 pages in the XYZ Popup Dialog Box.

1. Popup Dialog Box

2. Basic Settings

3. About

1. Popup Dialog Box

You can create a dialog box from this page. The settings of the dialog box configurations are given below.

The dialog box has 2 sections, a title and a body. 


 Dialog box title

Title : We can enter the title of the dialog box here.

Title color : We can select the Title color here with the help of color picker.

Title font size : This feature is available in premium version only.


 Dialog box content

Show referral URL based messages : This feature is available in premium version only.

Content : Enter your dialog box content here.

Position Settings 

There are 2 options for positioning the dialog box, predefined settings and manually edit settings.

Dialog box predefined positions

In the predefined settings, you can select one position from the predefined 9 positions.
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.

Dialog box manual position

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 dialog box 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 features are available only in premium version.

Dialog box effects

Draggable option : With this option users can drag the dialog box in the webpage from one location to other. (Available in premium only)

Slidable option : This is the option of sliding the dialogbox from outside the webpage to the selected position.  (Available in premium only)

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
2. Based on number of pages browsed
3. both

In the “Based on delay” logic, the dialog box will appear after a delay.

Dialogbox - Based on 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.

Dialog Box Display Logic Settings - Pages Browsed

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“.

Dialog Box Display Logic Settings - Both

In the “both” option, the dialog box will appear after a particular delay and after the user browsed some pages.

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.

Dialog box trigger

Display trigger – Using this option, we can display the dialog box on loading of the page or when clicking a location/element in a page or when exiting the webpage. (Available only in premium version)

Close button option – If you want to display a close button with the dialog box, use this option. Otherwise the user cannot close the dialog box. (More close options are available in premium version

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.

Display devices - You can select the devices where you want  to display the dialog box. We can display the dialog box in desktop/PC or (and) Mobile/Tablet. (Available only in premium version)

Popup Closing Settings

 Dialog box close modes

Close Mode – There are different close modes like close the popup when clicking in an element in the box etc. (Available in premium version only)

Auto Close after timeout : Automatically close the dialog box after a time period. (Available in premium version only)

Javascript Callback Settings

You can use some javascript callbacks to trigger any custom javascript code when displaying the dialog box or when closing the dialog box.

This is useful to stop a video when we close the dialog box or to autostart/continue a video when a dialog box displayed.

Javascript Callback Settings

Callback on popup display - This is the javascript callback when a popup is displaying. We can use a javascript code to resume/autostart a video when displaying the dialog box. (Available in premium version only)

Callback on popup hide - The javascript code used here will active when we close the dialog box. This can be used to stop a video when we close the dialog box. There are javascript code to stop a video and you need to use this code here to stop the video. (Available in premium version only)

Style Settings

Here we can select the style of the dialog box.

Style Settings Dialogbox

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.

Background color – We can select the dialog box background using a color picker.

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 dialog box, use this oprion. As the radius increases, the roundness also increases. Use ’0′ for rectangular edges.

Placement Settings

Placement mechanism – This is the mechanism we are using to add the dialog box in pages.

There are 3 placement mechanisms

1. Automatic – Here the dialog box will load in all pages.

Dialog Box Placement Settings- Automatic

2. Manual – If you want to display the dialog box in some pages, use this option. Now you need to add the short code (like [xyz_dbx_default_code]) in the pages where you want to display the dialog box.

Dialog box placement

3.  Specific Pages – Here you can specify the pages you want to display the dialog box. You can display the dialog box in pages, posts and in home page.

Reset cookies?(for testing) – For testing purposes we need to reset the cookies. If you want to see this dialog box immediately after you make changes in any settings, you have to reset the cookies.
Tick this option to reset the cookies.

Now click the “Update Settings” button to save the  dialog box.

If the selected placement mechanism is “Automatic”, the dialog box will display in all pages.

If the selected placement mechanism is  ”Manual”, please copy the short code and paste in the page where you want to display the dialog box.


2. Basic Settings

Click on the “Basic Settings” link to get the dialog box settings page.

Basic Settings - Dialog Box

Enable tiny MCE filter to prevent auto removal of < br > and < p > tags ? - In the wordpress, it will remove the <p> and <br> tags from the html content automatically. You can prevent this by enabling this setting.

Enable credit link to author? - You can support us by enabling the credit link in your site.

Enable Dialog Box Popup? – You can enable or disable the popup here without deactivating the plugin.

Compatible with cache plugin? - If you are using any cache plugin, it will affect the popup. To avoid this we can enable this option, if you are using any cache plugin. 

(If this option is enabled, only a javascript will load. There is a slight delay in appearing the popup if this setting enabled.)

Enable Premium Version Ads? - You can enable or disable the premium version ads in the plugin pages.


3. About

You can see and compare the features of the Popup Dialog Box free plugin and the premium version XYZ WP Popup plugin here.



Please Contact Us if you have any questions or suggestions.

Visit XYZScripts.com  - Official Blog  -  Knowledge Base (F.A.Q)  -  Documentation (User Guide)

Join us on Facebook  -  Twitter  -  Google +