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.

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