Popup

Table of Contents

1. HTML Examples
2. Popup methods
3. Popup events
4. Popup transitions

HTML Examples

The pop-up window can contain a header, content, and footer area like the page element.

To open a pop-up window from a link, use the data-rel attribute in HTML markup as in the following code:

<a href="#popup" class="ui-btn" data-rel="popup">Open popup when clicking this element.</a>

And also, popup is opened by link with ID as mentioned. So the id in the link and the the id the of popup page listed below should have the same id to be opened.

The following table shows examples of various types of popups. If you want to implement the examples with above 'opening' code, be sure to meet the same id.

<div id="popup" class="ui-popup">
   <div class="ui-popup-header">Power saving mode</div>
   <div class="ui-popup-content">
      Turning on Power
      saving mode will
      limit the maximum
      power
   </div>
   <div class="ui-popup-footer">
      <button id="cancel" class="ui-btn">Cancel</button>
   </div>
</div>

<div id="2btnPopup" class="ui-popup">
   <div class="ui-popup-header">Delete</div>
   <div class="ui-popup-content">
      Delete the image?
   </div>
   <div class="ui-popup-footer ui-grid-col-2">
      <button id="2btnPopup-cancel" class="ui-btn">Cancel</button>
      <button id="2btnPopup-ok" class="ui-btn">OK</button>
   </div>
</div>

<div id="listBoxPopup" class="ui-popup">
   <div class="ui-popup-header">When?</div>
   <div class="ui-popup-content" style="height:243px; overflow-y:scroll">
      <ul class="ui-listview">
         <li>
            <label for="check-1" class="ui-popup-checkbox-label">Yesterday</label>
            <input type="checkbox" name="checkset" id="check-1"/>
         </li>
         <li>
            <label for="check-2" class="ui-popup-checkbox-label">Today</label>
            <input type="checkbox" name="checkset" id="check-2"/>
         </li>
         <li>
            <label for="check-3" class="ui-popup-checkbox-label">Tomorrow</label>
            <input type="checkbox" name="checkset" id="check-3"/>
         </li>
      </ul>
      <ul class="ui-listview">
         <li>
            <label for="radio-1" class="ui-popup-radio-label">Mandatory</label>
            <input type="radio" name="radioset" id="radio-1"/>
         </li>
         <li>
            <label for="radio-2" class="ui-popup-radio-label">Optional</label>
            <input type="radio" name="radioset" id="radio-2"/>
         </li>
      </ul>
   </div>
   <div class="ui-popup-footer">
      <button id="listBoxPopup-close" class="ui-btn">Close</button>
   </div>
</div>

<div id="listNoTitleNoBtnPopup" class="ui-popup">
   <div class="ui-popup-content" style="height:294px; overflow-y:scroll">
      <ul class="ui-listview">
            <li><a href="">Ringtones 1</a></li>
            <li><a href="">Ringtones 2</a></li>
            <li><a href="">Ringtones 3</a></li>
      </ul>
   </div>
</div>

<div id="PopupToast" class="ui-popup ui-popup-toast">
   <div class="ui-popup-content">Saving contacts to the SIM card</div>
</div>

Popup Methods

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

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>

JS code:

   /* 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();
   });

Popup Events

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

To use popup events, use the following code:

HTML code:

<div id="popup" class="ui-popup">
   <div class="ui-popup-header"></div>
   <div class="ui-popup-content"></div>
</div>

JS code:

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

Because popup works in asynchronos way due to animation, the features of popup need to work under event like below code:
If popup is opened or closed by only openPopup() or closePopup() method, it might occur exceptional errors or bugs.
So it is highly recommended to handle the feature by using event.

HTML code:

<!--Popup HTML code-->
<div id="popup" class="ui-popup">
   <div class="ui-popup-content"></div>
   <div class="ui-popup-footer">
      <div class="ui-btn" id="cancel-btn"></div>
   </div>
</div>

JS code:

   /* Use popup events */
   var popup = document.getElementById("popup"),
       cancel = document.getElementById("cancel-btn");

   openButton.addEventListener("click", function()
   {
      tau.openPopup("#popup");
   });
   popup.addEventListener("popupshow", function()
   {
      console.log("Implement code after popup show completely");
   });

   cancel.addEventListener("click", function()
   {
      tau.closePopup();
      console.log(window.getComputedStyle(popup).display); /* Block - not closed yet */
   });
   popup.addEventListener("popuphide", function()
   {
      console.log(window.getComputedStyle(popup).display); /* None - closed completely */
   });

Popup Transitions

Tizen Wearable Web UI framework does not apply transitions by default. To set a custom transition effect for a specific popup component, add the data-transition attribute to a link:

<a href="index.html" data-rel="popup" data-transition="slideup">I'll slide up</a>

To set a default custom transition effect for all pop-up windows, use the popupTransition property:

/* JavaScript code */
tau.defaults.popupTransition = "slideup";

The following table lists the popup transition properties.