In the Dottoro theme, there are basically two types of popups: "normal" popups and gallery popups.
Normal popups can be created and managed under Popups » Popups, while gallery popups under Popups » Gallery Popups.
Gallery popups have been designed to display galleries as popup slideshows while normal popups give you full control over the content of popup windows like pages and posts do.
In the following sections, the normal popups will be described.
For details about gallery popups, please see the Popup Slideshows section.
Dottoro Theme provides a flexible environment for creating and displaying popup windows. The contents of popups can be edited the same way as the contents of pages and posts, and you can also use shortcodes in them. You can set whether a popup window should be modal or modeless, draggable or not and much more. You can specify the default settings for all popup windows under Popups » 'Popup Settings' and any of these settings can be overridden for each individual popup (Popup Options on single popup pages).
In addition, you have full control over not just the contents but also the main components of popup windows. With the help of popup templates you can specify where and how you want to display the close and fullscreen buttons and the title bar.
Finally, to make the use of popup windows more comfortable, the look of popup windows can be customized in the Theme Editor (Components » Popup Window).
Popups can be created and managed under Popups » Popups. To create a new Popup, click 'Add New' on the top of the page, give it a title and enter text, then click Publish. You can also use shortcodes in the content of popups. In addition, the theme supports a shortcode, the [popup_arg] shortcode that allows you to display the values passed to the popup. For details, please see the Displaying Popups section.
There is a 'Popup Options' box below the content editor. Here you can specify the settings of the popup window. It is also possible to change the default settings of popups ('Popup Settings' menu), so you don't need to change the same setting every time you create a new popup.
You can specify the default settings for all popup windows under Popups » 'Popup Settings' and any of these settings can be overridden for each individual popup (Popup Options on single popup pages).
| Settings | |
|---|---|
| Content |
Here you can select what you want to display in the popup.
Some notes:
JavaScript is supported in popups from version 1.39.
|
| Popup CSS Class |
One or more CSS classes to add to the outer element of the popup window, separated by a single space.
Custom CSS classes allow you to set the position, the size and other properties of the popup window.
Some notes:
|
| Template |
Select a template for the popup.
The popup template specifies where and how to display the close and fullscreen buttons, the title bar and more.
Popup templates can be created under Templates » Popup Templates. More on Popup Templates. |
| Close Button |
Select whether you want to display the popup close button or not and you can also select an icon for the close button.
Technically, these settings change the way the [popup_button type="close"] shortcode works in the popup template. |
| Fullscreen Button |
Select whether you want to display the popup fullscreen button or not and you can also select an icon for the "go fullscreen" and "exit fullscreen" buttons.
Technically, these settings change the way the [popup_button type="go_fullscreen"] and [popup_button type="exit_fullscreen"] shortcodes work in the popup template.
Please note that the fullscreen button is only supported in modern browsers (in IE, version 11 or above). In older browsers, the button will be hidden.
|
| Auto Close | Specifies the amount of time in milliseconds that the popup should remain visible before it hides. The value of 0 means that there is no time limit. |
| Window Type | Select whether the popup window should be modal or modeless. While a modal window is open the user cannot interact with the main window. |
| Position |
Set the position of the popup window.
|
| Move Into View | Select whether the popup window should be automatically moved into the viewport (browser window) or not. |
| Size Limit | Select whether the popup window should be automatically resized when it is larger than the browser window (view) or not (none). It is advisable to select the view option, otherwise it can happen that the popup will be larger than the viewport and cannot be closed. Also see the Popup CSS Class option above. |
| Margin | Here you can add some extra space around the popup window, in pixels. This is not the same thing as the CSS margin but they are very similar. This option affects the way the Move Into View and Size Limit options work. This margin is included in the boundary box of the popup window when its size and/or position is being calculated. It is mostly useful when the close button is placed outside the popup window. For example, if the close button is placed at the top-right, outside of the popup window, then add some space on the top and right sides of the popup and the close button remains visible even if the popup needs to be moved and/or resized on small screen devices. |
| Action On Close | Select whether the popup window should be destroyed or hidden when closed. The contents of popup windows are loaded with AJAX (SEO optimization). The destroy option ensures that the contents are reloaded every time the popup is shown while hidden popups only reopen without refreshing their content. Always destroy a popup if parameters are passed to the popup. |
| Close On Outside Click | Select whether modal popup windows should be closed when clicking outside the popup or not. This setting only affects modal popup windows. |
| Draggable | Select whether you want popup windows to be draggable or not. Since a popup window can be only dragged by clicking on its title bar, popup windows without a title are never draggable. |
| Show Animation - Properties |
Specify the properties to animate when the popup appears and disappears.
The value must be given in JavaScript object literal format.
The supported properties are:
|
| Show Animation - Duration | Specify the duration of the show/hide animation, in milliseconds. |
| Show Animation - Easing | Specifies the easing function for the show/hide animation. Easing functions (timing functions) specify how the intermediate values are calculated during the animation. It allows for a transition to change speed over its duration. See Live Demo. |
| Media Preload | Select whether media (images, videos and iframes) should be preloaded before opening the popup, or not. |
Popup templates give you control over the main components of popup windows. You can specify where and how you want to display the close and fullscreen buttons, the title bar and for instance, if you want to add a copyright line at the bottom of the popup windows on your site, just add it to a popup template so you don't need to add it to the content every time you create a new popup.
You can select a default popup template with the Template option under Popups » 'Popup Settings' and this setting can be overridden for each single popup with the Template option on the Edit Popup Screen.
Popup templates can be created and managed under Templates » Popup Templates. The theme comes with a couple of predefined templates that are designed to meet the most common needs, and you can always create custom ones. Predefined templates give you a good basis to create your own popup templates.
Shortcodes for Popup TemplatesThere are a couple of shortcodes that are designed for popup templates. They display the titlebar, close and fullscreen buttons and the body of a popup window. They can be used in popup templates and also in slideshow templates used for gallery popups.
Displays the title bar of the popup window. The title bar commonly contains the title, the close and fullscreen buttons.
Displays the title of the popup window.
Displays a button bar. The button bar commonly contains the close and fullscreen buttons.
Displays a close or fullscreen button. Optionally, you can put any HTML content into the button. This is helpful if you need a totally custom close or fullscreen button.
| Attributes | |
|---|---|
| standard |
Specifies whether the standard CSS styles should be applied to the button or not (true | false). Default is true.
This is a convenience feature and mostly useful if you want to add the popup_button to the content of a popup. |
| type |
Specifies the type of the button (close | go_fullscreen | exit_fullscreen).
Please note that the fullscreen button is only supported in modern browsers (in IE, version 11 or above). In older browsers, the button will be hidden.
|
| icon |
Specifies an icon for the button.
An empty string means that the default icon will be used. The default icon can be set with the Close Button and Fullscreen Button options under Popup Settings and on the Edit Popup Screens. For a complete list of icons, see Font Icons. If you do not need any icon, set the icon attribute to 'none'.
Please note that if the [popup_button] shortcode has HTML content, no icon will be shown.
|
This shortcode provides a standard way to create a wrapper element around certain popup buttons.
The [popup_button] shortcode allows you to create a "go_fullscreen" and "exit_fullscreen" button separately to make it easier to design them.
But since the "go_fullscreen" button does the opposite of the "exit_fullscreen" button, in most cases they are placed at the same place and only one of them is visible at a time.
In other words they work like a toggle button.
The popup_buttons_wrapper shortcode is designed for these cases. It provides a "layer" for the buttons to make it easier to position them.
Technically, the popup_buttons_wrapper shortcode creates a div element with a type specific CSS class. Currently it can only be used for a wrapper element around a "go_fullscreen" and "exit_fullscreen" buttons, but it may be extended if the [popup_button] shortcode will support more button types.
| Attributes | |
|---|---|
| type | Specifies the type of the button wrapper. Currently only one type is supported: fullscreen. |
Displays the body of the popup window. The content of the popup specified in the WordPress Content Editor on the Edit Popup Screen is displayed by this shortcode.
There are basically two ways to display a popup:
Regardless of whether you choose the [popup_opener] shortcode or the DottoroWP.OpenPopup JavaScript function to open a popup, you will need the identifier of the popup. To get the identifier of a popup, open the edit popup page and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier.
[popup_opener popup_id="23"]Open Popup[/popup_opener]
[popup_opener nested_shortcode="button"][button skin="coral"]Open popup[/button][/popup_opener]
return false; is required to cancel the onclick event (if the click event is canceled the browser does not navigate to the URL of the link).
<a href="#" onclick="DottoroWP.OpenPopup (2365); return false;">Open Popup</a>
[button onclick="DottoroWP.OpenPopup (2365); return false;"]Open Popup[/button]
This example shows how to pass values to a popup (name: John, age: 53).
[button onclick="DottoroWP.OpenPopup (2365, {'name': 'John', 'age': 53}); return false;"]Open Popup[/button]But how to access the passed arguments in the popup? The [popup_arg] shortcode allows you to display the passed arguments. Additionally, make sure that the Action On Close option of the popup is set to destroy to ensure that the contents are reloaded every time the popup is shown. For example, if the content of a popup looks like this:
<h1>Hello [popup_arg name="name" /]!</h1>
<div>You are [popup_arg name="age" /] years old.</div>then the following popup will appear:
[button href="[popup_arg name='url']"]Visit Site[/button] does not work.
[do_action action="popup_link" /]Dottoro_Popup::get_popup_arg PHP function to get the value of a passed argument.
Insert the following lines into the functions.php file of your child theme:
add_action ('popup_link', 'display_popup_link');
function display_popup_link () {
$url = Dottoro_Popup::get_popup_arg ('url');
echo (do_shortcode ('[button href="'. $url .'"]Visit Site[/button]'));
}
<script>
Dottoro.Ready (PopupForExternalMenus);
function PopupForExternalMenus() {
var items = Dottoro.GetElemsByClass ('popup_link');
for (var i = 0; i < items.length; i++) {
var item = items[i];
// the css classes are added to the parent element of menu links
var link = item.getElementsByTagName ('a')[0];
if (link) {
Dottoro.AddListener ('click', OnClickExternalMenu, link);
}
}
}
function OnClickExternalMenu (event, link) {
DottoroWP.OpenPopup (2365, {'url': link.href});
return Dottoro.PreventDefault (event);
}
</script>
add_action ( 'dottoro_scripts', 'custom_scripts' );
function custom_scripts ( ) {
$mtime = @filemtime ( FOLDER_CHILD_THEME . 'js/script.js' );
Dottoro_Theme::print_script ( URL_CHILD_THEME . '/js/script.js', $mtime );
}
[button onclick="DottoroWP.GetOwnerPopup (this).Close(); return false;" ]Close[/button]
<script>
Dottoro.Ready (ShowPopupOnLoad);
function ShowPopupOnLoad () {
DottoroWP.OpenPopup (2365);
}
</script>
<script>
Dottoro.AddListener ('scroll', ShowPopupOnScroll, window);
function ShowPopupOnScroll () {
var y = Dottoro.GetDocScrollTop ();
var max = Dottoro.GetDocScrollMax ();
if (y > max.y / 2) {
DottoroWP.OpenPopup (2365);
}
else {
DottoroWP.ClosePopup (2365);
}
}
</script>
Since the contents of popups rarely need to be indexed by search engines, they are loaded with ajax. This causes a delay in opening popups. If you want to eliminate this delay, you have the following options:
The main drawback of preloading is that the popup downloads regardless of whether it can or should open.
add_action( 'dottoro_close_body', 'preload_popups', 5 );
function preload_popups () {
Dottoro_Popup::preload ( array ('id' => 2423, 'loadtype' => 'ajax') );
}
add_action( 'dottoro_close_body', 'preload_popups', 5 );
function preload_popups () {
Dottoro_Popup::preload ( array ('id' => 2423, 'loadtype' => 'static') );
}
add_action( 'dottoro_close_body', 'preload_popups', 5 );
function preload_popups () {
if ( Dottoro_Theme::get_page_id () == 23 ) {
Dottoro_Popup::preload ( array ('id' => 2423, 'loadtype' => 'ajax') );
}
}
add_action( 'dottoro_close_body', 'preload_popups', 5 );
function preload_popups () {
$popups = array (
array ('id' => 2415, 'loadtype' => 'static'),
array ('id' => 2423, 'loadtype' => 'static'),
);
Dottoro_Popup::preload ( $popups );
}
add_action( 'dottoro_close_body', 'preload_popups', 5 );
function preload_popups () {
$popups = array (
array ('id' => 2415, 'loadtype' => 'ajax', 'args' => array ( 'url' => 'dottoro.com' )),
array ('id' => 2423, 'loadtype' => 'ajax', 'args' => array ( 'url' => 'dottoro.com', 'color' => 'red' )),
);
Dottoro_Popup::preload ( $popups );
}