Only the users are allowed to enter the Central Administration. Login

Popups

PopupsForm - Popups



Result (span item):



Please specify options for the popup:

Type of data loaded
  • * - a block with ID or Class must first be created on the page
  • ** - iFrame to load any HTML page
  • *** - passes the GET variable «p» (for using the site pages)(for example /ajax.php?p=path href)
  • **** - passes GET variable «shop_cat_p» (for example /ajax.php?shop_cat_p=path href) where you can specify the full path to the product card page
  • ***** - Frame with Ajax article directory page, passing GET variable «blog_cat_p» (For example /ajax.php?blog_cat_p=path href)
  • HTML - HTML data is loaded with similar FRAME variables, but without using iframe block when displaying data.


 ID/Class or Link Window Title Text of the window close button
(only displayed if a value is specified) Link/button text for opening a window Window Width Window Height Fix window title Close the window when clicking outside of it Auto Width and Height Automatic width and height takes precedence over the original width and height Auto-width of the window (value indicates the minimum possible width) Automatic window height (value indicates the lowest possible height) Maximum width and height You can limit the maximum opening of the window even if you are using automatic width and height. Maximum window width Maximum window height Width of the mobile window
(if the window is smaller than the specified size, then it is set to the specified width)   Done
[Sample Button - Popup Video Window]


The popup window can contain text, html block content, iframe loading (youtube or other site data) or ajax data (ajax data from pages or articles on your site ).

Instruction:

Using the code below, the popup will be invoked.

Code: html
<a class="hotengine-script-popup" target="blank" data-iframe="2" data-width="0" data-height="0" data-auto-width="320" data-auto-height="320" data-max-height="500" data-max-width="750" data-mobile-width="768" data-header-fix="0" data-title="Sample Window"  href="https://www.youtube.com/embed/T9zuAxr1Wfg?rel=0&amp;autoplay=1">Button text</a>

The following parameters can be specified in the link parameters:
  • data-iframe (type of loaded data)
    • 2 - Frame full url path (e.g. for youtube upload)
    • 3 - ID or Class from the page (a block with ID or Class must first be created on the page )
    • 4 - Frame with page data "p" (to use site pages)(for example /ajax.php?p=path href)
    • 5 - Frame with product card data "shop_cat_p" (for example /ajax.php?shop_cat_p=path href) where you can specify the full path to the product card page
    • 1 - Frame with article catalog page data, passes GET variable "blog_cat_p" (for example /ajax.php?blog_cat_p=path href) where you can specify the full path to the article
    • 11 - HTML article catalog page data, passes GET variable "blog_cat_p" (for example /ajax.php?blog_cat_p=path href) where you can specify the full path to the article
    • 14 - HTML page data "p" (to use site pages)(for example /ajax.php?p=path href)
    • 15 - Product card HTML data "shop_cat_p" (for example /ajax.php?shop_cat_p=path href) where you can specify the full path to the product card page
  • data-width - window width
  • data-height - window height
  • data-auto-width - auto-width of the window (the value indicates the minimum possible width)
  • data-auto-height - automatic window height (value indicates the lowest possible height)
  • (auto width and height take precedence over the original width and height)
  • data-max-width - maximum window width
  • data-max-height - maximum window height
  • data-mobile-width - width of the mobile window (if the window is smaller than the specified size, then it is set to the specified width)
  • data-title - Window Title
  • href or data-href - path to open page or get variable
  • data-close-button - close window button text (only displayed if a value is specified)
  • data-unset-height - Remove the height style of the content inside the window (additional attribute that eliminates the height limit of the block with content inside the window) data-unset-height="1"
  • data-header-fix - Fix window title
  • data-close-overlay - Enable/Disable closing the window when clicking outside its area (additional attribute. Values: "1" (enable), "0" (disable)). Default - Enabled (if not specified).

data-micromodal-close - Attribute to close the open window. It can be placed anywhere in the content that is loaded inside the window.
data-dialog-callback - The data-dialog-callback attribute allows you to specify the name of a function that will be executed after the popup window is opened.
Example
Code: html
<a href="#" class="hotengine-script-popup" data-dialog-callback="myCustomFunction">Open</a>
<script>
function myCustomFunction() {
    console.log("Callback executed!");
}
</script>

data-dialog-button-callback - The data-dialog-button-callback attribute allows you to specify callback functions for popup window buttons. Format: ButtonName:callbackFunctionBtn, multiple buttons are separated by commas. Functions can be defined before or after the popup is opened — they will be executed when the corresponding button is clicked, if the function exists.
Example
Code: html

<a href="#" class="hotengine-script-popup" data-dialog-button-callback="Ok:callbackFunctionBtn1">Open</a>

<script>
window.callbackFunctionBtn1 = function() {
    console.log("Ok button clicked");
};
</script>

Example of a CSS style that fixes multiple buttons at the bottom of the popup window with an added background layer.
Example
Code: CSS
#dialog_hotengine_script_popup .modal__container {
    display: flex;
    flex-direction: column;
    max-height: 95vh;
}

#dialog_hotengine_script_popup .modal__content {
    overflow-y: auto;
    flex: 1 1 auto;
    padding-bottom: 60px; 
}

#dialog_hotengine_script_popup .modal__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 40px);
    background: #fff; 
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 10;
    display: flex;
    justify-content: flex-start; 
}

#dialog_hotengine_script_popup .modal__btn {
    min-width: 80px; background: #0078d1;
        color: #fff;
    padding: 6px 14px;
}


Sample Youtube video popup:
Code: html
<a class="hotengine-script-popup" target="blank" data-iframe="2" data-width="0" data-height="0" data-auto-width="320" data-auto-height="320" data-max-height="500" data-max-width="750" data-mobile-width="768" data-title="Sample Window"  href="https://www.youtube.com/embed/T9zuAxr1Wfg?rel=0&amp;autoplay=1">Button text</a>

Result: Button text


Sample Code Back