Popup Handling

The popup component shows in the middle of the screen a list of items in a pop-up window. It automatically optimizes the pop-up window size within the screen. The following table describes the supported popup classes.

Popup Methods

To open or close the popup component, use the methods listed in the following table.

Table: Popup methods
Method Description
tau.openPopup(to) Opens a popup by calling the openPopup() method. The to argument is a pop-up container object or string.
tau.closePopup() Closes a popup by calling the closePopup() method.

To find the currently active popup, use the ui-popup-active class.

To bind the popup to a button, use the following code:

<!--HTML code-->
<div id="1btnPopup" class="ui-popup">
   <div class="ui-popup-header">Power saving mode</div>
   <div class="ui-popup-content"></div>
   <div class="ui-popup-footer">
      <button id="1btnPopup-cancel" class="ui-btn">Cancel</button>
   </div>
</div>
/* JavaScript code */
<script>
   /* Popup opens with button click */
   button.addEventListener("click", function(ev)
   {
      tau.openPopup("#1btnPopup");
   });

   /* Popup closes with Cancel button click */
   document.getElementById('1btnPopup-cancel').addEventListener('click', function(ev)
   {
      tau.closePopup();
   });
</script>

The following table lists the events related to pop-ups.

Table: Popup events
Event Description
popupbeforecreate Triggered when the pop-up is initialized, before most plugin auto-initialization occurs.
popupcreate Triggered when the pop-up has been created in the DOM (for example, through Ajax) but before all UI Components have had an opportunity to enhance the contained markup.
popupbeforehide Triggered on the pop-up we are transitioning away from, before the actual transition animation is kicked off.
popuphide Triggered on the pop-up we are transitioning away from, after the transition animation has completed.
popupbeforeshow Triggered on the pop-up we are transitioning to, before the actual transition animation is kicked off.
popupshow Triggered on the pop-up we are transitioning to, after the transition animation has completed.

To use popup events, use the following code:

<!--Popup html code-->
<div id="popup" class="ui-popup">
   <div class="ui-popup-header"></div>
   <div class="ui-popup-content"></div>
</div>

/* JavaScript code */
<script>
   /* Use popup events */
   var popup = document.getElementById("popup");
   popup.addEventListener("popupbeforecreate", function(ev)
   {
      /* Implement code for popupbeforecreate event */
   });
</script>