DJ-Popup

DJ-Popup

How to use?

Below is a short instructional video showing how to easily turn our section into a DJ-Popup


Status

If the section is correctly configured as a DJ-Popup. The section will be marked as a DJ-Popup which makes it easier to identify the popups created on the subpage




If the system detects that a section is marked as DJ-Popup but no trigger has been declared, the section will be marked as invalid




Configuration

Content

Enabled

Use this checkbox to specify whether the section is to be converted as a DJ-Popup

Heading

With the value of this text field you can specify what title will be displayed in your popup

Close icon

Use this field to set your own closing icon for the DJ-Popup

Save text

Content of the button responsible for the save action
Link assigned to the button responsible for the save action

Cancel text

Content of the button responsible for the DJ-Popup closing action

Settings

Heading

  1. Header style - You can specify the header size in h1-h6

Repeat

  1. Repeat popup - always/first time only/after x time
  2. Repeat after x time in format DD:HH:MM

Direction

  1. Popup open direction - choose the direction from the list
  2. Position margin - set the position margin value
  1. Overlay color - You can use it to specify the background colour of the popup overlay
  2. Animation - Type of animation to display the DJ-Popup
  3. Fullscreen - DJ-Popup mode built into UIKit
  4. Width - Width of DJ-Popup ( % )
  5. Height - Height of DJ-Popup ( % )
  6. Padding - Padding to be placed on top of the main DJ-Popup container
  7. Left - Distance from left side of screen ( % )
  8. Right - Distance from right side of screen ( % )
  9. Top - Distance from top side of screen ( % )
  10. Bottom - Distance from bottom side of screen ( % )
  1. Save button style - The style of the button responsible for the save action
  2. Cancel button style - Style of button responsible for DJ-Popup closing action

Triggers

DJ-Popup allows us to create a trigger. You can use them to determine at which point the popup will be displayed. The popup will only be displayed once when any trigger is called.

On Page Load

Automatically display a popup when a visitor opens your site.

Available parameters :
  1. Delay - A value specified in milliseconds after which the trigger will be called

On Scroll

Automatically display a popup when user scrolls % of page.

Available parameters :
  1. Distance - Value specified as a percentage. When the page is scrolled to the specified distance, the trigger will be called

Scroll to

Automatically display a popup when user scrolls page to the element

Available parameters :
  1. Link - You can use this attribute to assign a trigger to a link anchor
  2. Selector - CSS selector assigned to the trigger

On hover

Show a popup when user hovers on specific parts of the page.

Available parameters :
  1. Link - You can use this attribute to assign a trigger to a link anchor
  2. Selector - CSS selector assigned to the trigger
  3. Repeating - If you check this option, the trigger will be called each time the user fulfils its condition

On Click

Automatically display a popup when user scrolls page to the element

Available parameters :
  1. Link - You can use this attribute to assign a trigger to a link anchor
  2. Selector - CSS selector assigned to the trigger
  3. Repeating - If you check this option, the trigger will be called each time the user fulfils its condition



      • Related Articles

      • How to resize images in DJ-Classifieds?

        DJ-Classifieds keeps the original images/pictures when you upload them. If you want to change your website's template or alter the images in adverts, categories or profiles to a better fit, you can always do this following this tutorial. ( Video ...

      • Displaying the DJ-Classifieds on website

        20 views to choose from Using the DJ-Classifieds component, there are twenty view options available. Add item (advert submission form) Category blog layout Category table layout Category tree Favourites ads Offers receiver Offers submitted Points ...

      • I like the idea of tabbed interface, how does it work? How to use PageBreak in DJ-Catalog2

        Not at all! Just add into the product description a page break (by clicking the Pagebreak button) and provide the page title, which will be used as the tab name, and … ta-da - you get a nice tabbed interface, which can be different for each product. ...

      • How to add social buttons to DJ-Classifieds

        DJ-Classifieds allows you to display social buttons from various sharing platforms. Take a look at a few simple steps on how to put them to the DJ-Classifieds single ads. Step1: Get the social buttons’ code Many sharing tools allow you to generate a ...

      • How to enable Style-5 (Popup) theme in DJ-EasyContact

         The Style 5 theme lets you display the contact form in lightbox/popup that is triggered by a little blue bubble located in bottom-right of the page. Contrary to regular styles of the module (Styles 1 - 4) this one needs one different setup.  As we ...