JSignage:Popup

This page is related to jSignage layers and interactivity.

jSignage.popup()

jSignage.popup( layer, attributesObject )

Returns: jSignage Object

Description

This jSignage interactive layer displays the layer provided as parameter, over a semi-transparent gray background that dims the viewing area. It's useful for attracting the user's attention, for instance, when a confirmation is required. The dimming background is automatically removed when the popup layer ends.

Parameters

layer
Type: jSignage Object.

The jSignage layer to be displayed on top of the viewport. Since the layer is centered, only the width and height layer's attributes are used for geometry, the other ones are ignored.
attributesObject
Type: Plain Object.
An optional object containing any of the following attributes:
- dimming
  The dimming percentage (or a number between 0 and 1) applied to the viewport. Default: '50%'.
- popupDur
  The duration of the in-effect; if grater than 0, then the opacity of the background is animated when the popup appears. Default: 0s.
- popoutDur
  The duration of the out-effect; if grater than 0, then the opacity of the background is animated when the popup disappears. Default: 0s.

Functions

Any of the common set of jSignage layer functions can be used, such as .begin(), .end(), .show(), .hide(), etc. The popup group is added to the top level “svg” element in the SVG document.

Examples

User confirmation

The popup can also be triggered if used within a callback function for interactive events, as shown below.

$(function(){
     $.pushButton({
            left: '35%', top: '40%', width: '30%', height: '20%',
            style: 'round',
         }, 'Submit' )
      .click( function() { 
            $.popup(
                $.textArea({ fontSize: '60', dur: 5,}).text( 'Thank you, please wait...' ),
                { dimming: '10%', popupDur: 1, popoutDur:1 }
            );
        })
  .addTo( 'svg' );
});