Class: PopUpViewer

PR. PopUpViewer

The Popup has a simple functionality that displays or hides an element via a quick fade-in/fade-out transition and is controlled via a button. Other widgets can be placed into a popup widget.

An ID is required as a button actions the popup and will require something to reference it by. It is possible to use multiple ID’s so that a single button could action several popups at once but it is recommended to use separate IDs and use a button with multiple targets.

Any widgets inside of the popup (such as videos or Image Effects) will only fire once the popup is opened.

A popup can be actioned via a button which is a child element of the popup meaning that the close button for the popup can be contained within the popup.

HTML Parameters

The following parameters are required.

data-widget="POPUP" Required
The identifier for the widget type.
id="{{id}}" Required
An ID is required to provide any functionality as popups are actioned via a button.

Examples

Basic Implementation
The popup widget only requires that the data-widget is set to POPUP on an element and that that element can be referenced via it’s ID. It is recommended to use unique IDs.

A button is required to action the popup.

<div id="uniqueID" data-widget="POPUP">
  <!-- Content omitted for brevity -->
</div>
<div id="buttonID" data-widget="BUTTON" data-target="uniqueID" data-action="TOGGLE_POPUP"></div>

Multiple Popups controlled with one button
Multiple popups can be controlled via a button with multiple targets. It is still recommended to use unique ID’s.

In this example there are two popups which are controlled via two buttons which either show them, or hide them.

<!-- Popup 1 -->
<div id="uniqueID1" data-widget="POPUP">
  <!-- Content omitted for brevity -->
</div>
<!-- Popup 2 -->
<div id="uniqueID2" data-widget="POPUP">
  <!-- Content omitted for brevity -->
</div>
<!-- Buttons that control the popups -->
<div id="buttonID" data-widget="BUTTON" data-target="uniqueID1,uniqueID2" data-action="SHOW_POPUP,SHOW_POPUP"></div>
<div id="buttonID" data-widget="BUTTON" data-target="uniqueID1,uniqueID2" data-action="HIDE_POPUP,HIDE_POPUP"></div>

Full screen popup with close button
A button which is a child element of the popup can still reference and action it meaning that the close button could be placed within the popup.

This example uses styling to create a popup that fills the screen and contains a button to close the popup. Additional content within the popup is omitted for brevity. Essential styling is applied inline although a stylesheet is recommended.

<!-- Popup -->
<div id="uniqueID1"
     data-widget="POPUP"
     style="width:100%; height:100%; top:0; left:0;">
    <!-- Close Button -->
    <div id="closeButton" data-widget="BUTTON" data-target="uniqueID1" data-action="HIDE_POPUP">Close</div>
</div>
<!-- Open Button -->
<div id="openButton" data-widget="BUTTON" data-target="uniqueID1" data-action="SHOW_POPUP">Open</div>

Building on the last example a modal popup (where a backdrop covers the viewport) can be implemented where a button inside the popup covers the screen and is actionable to close the popup. In this example the popup can be dismissed by clicking the backdrop or by clicking the close button. Additional popup content is omitted.

Note that the backdrop and the popup content will fade in at the same rate. If a different transition would be required for the backdrop and the content then an animation could be used to wrap the popup content, this animation would fire when the popup is opened and perform the transition.

<!-- Popup -->
<div id="uniqueID1" data-widget="POPUP"
     style="width:100%; height:100%; left:0; top:0;">
    <!-- Backdrop - Button to close popup -->
    <div id="buttonID7" data-widget="BUTTON" data-target="uniqueID1" data-action="HIDE_POPUP"
         style="position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
                padding:0;
                margin:0;
                background:rgba(0,0,0,0.8)" >
    </div>
    <!-- Content inside the popup -->
    <div id="popupContent"
         style="position:absolute; width:400px; height:300px; left:100px; top:200px; ">
        <!-- Content omitted for brevity -->
        <!-- The close button -->
        <div id="closeButton" data-widget="BUTTON" data-target="uniqueID1" data-action="HIDE_POPUP">Close</div>
    </div>
</div>
<!-- Open Button -->
<div id="openButton" data-widget="BUTTON" data-target="uniqueID1" data-action="SHOW_POPUP">Open</div>
Author:
  • AppStudio Widgets
Source:
  • widgets/PopUpViewer.js, line 2

Extends

  • PR.BaseWidget

Members

elString

Description of the variable here.This is a public variable.

Source:
  • widgets/PopUpViewer.js, line 132

transitionDurationNumber

The maximum time it should take to complete the slide transition (in seconds)

Default Value:
  • 1000ms.
Source:
  • widgets/PopUpViewer.js, line 139

visibleBoolean

Is this popup element visible or hidden (assumes not visible from the start)

Source:
  • widgets/PopUpViewer.js, line 145

zIndexPositionNumber

The zIndex to place the popup in when it's 'open'

Source:
  • widgets/PopUpViewer.js, line 152

Methods

initialize( element )

Acts like a constructor, this function triggered by default when you create an object.

Parameters:
Name Type Description
element

The HTML DOM Element which acts like a slideshow.
Throws:
Error HTML Element not attached.
Source:
  • widgets/PopUpViewer.js, line 162

setzIndex( index )

Sets the zIndex of the popup
Currently makes no attempt to validate the param

Parameters:
Name Type Description
index

the zIndex to place this bad boy at
Source:
  • widgets/PopUpViewer.js, line 339

togglePopUp( name )

Show or hide the pop up depending on the visibility and the position of the popup.
If top=0, then pop up is displayed and if the top=999px then it is out of the viewport and hidden.

Parameters:
Name Type Description
name String

The data-layer attribute value. For ex: data-layer="-popup-html5video"
Source:
  • widgets/PopUpViewer.js, line 318
Top