Popup

The popup component handles creating and managing pop-up windows.

Table of Contents

1. Default Selectors
2. Manual Constructor
3. HTML Examples
4. Popup / ContextPopup
5. Options
6. Events
7. Managing a Popup

Default Selectors

By default, all elements with the class="ui-popup" and data-role="popup" attribute are displayed as Tizen Web UI popups.

Manual Constructor

To manually create a button component, use the component constructor from the tau namespace:

<div id="popup">
   <p>This is not a popup yet. But when TAU namespace calls me as widget, I will be popup.</p>
</div>
<script>
   var popupElement = document.getElementById("popup"),
       popup = tau.widget.Popup(popupElement);
</script>

HTML Examples

Basic Structure of Popup

Basically, popup has class="ui-popup-header" as Header, class="ui-popup-content" as body and class="ui-popup-footer" as button area. Here is a simple example:

<div id="1btn_popup" class="ui-popup">
   <div class="ui-popup-header">Popup Header</div>
   <div class="ui-popup-content popup-content-padding">
      Lorem ipsum dolor sit amet,
      consectetur adiptiscing elit, sed
      doei usmod tempore sit ipsum
   </div>
   <div class="ui-popup-footer">
      <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
   </div>
</div>

Context Popup

Context popup (ctxpopup) has a very simple structure. It does not need a header or footer. So, just add the content in the <div> area. See this example:

<div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
   <ul class="ui-listview">
      <li class="ui-li-anchor"><a href="#" data-rel="back">Copy</a></li>
      <li class="ui-li-anchor"><a href="#" data-rel="back">Cut</a></li>
      <li class="ui-li-anchor"><a href="#" data-rel="back">Paste</a></li>
      <li class="ui-li-anchor"><a href="#" data-rel="back">Clipboard</a></li>
   </ul>
</div>

Toast Popup

If you want to show popup as toast, please add "ui-popup-toast" class with "ui-popup".

<div id="popup_toast" data-role="popup" class="ui-popup ui-popup-toast">
   <div class="ui-popup-content">
      Toast popup text Toast popup text
   </div>
</div>

Popup / Context Popup

The difference between popup and context popup is the data-position-to options of the popup opener element.

Open Popup as Window Popup

When element has data-position-to="window", it opens window popup (normal popup).

<div data-role="page" class="ui-page" id="demo-page">
   <div class="ui-content">
      <ul class="ui-listview">
         <li class="ui-li-anchor"><a  href="#1btn_popup" data-inline="true" data-rel="popup" data-position-to="window">1btn popup</a></li>
      </ul>
       
      <div id="1btn_popup" class="ui-popup">
         <div class="ui-popup-header">Popup Header</div>
         <div class="ui-popup-content popup-content-padding">
                Lorem ipsum dolor sit amet,
                consectetur adiptiscing elit, sed
                doei usmod tempore sit ipsum
         </div>
         <div class="ui-popup-footer">
             <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
         </div>
     </div>
   </div>
</div>

Open Popup as Context Popup

When element has data-position-to="origin", it opens context popup.
In mobile profile, the default value is "origin". If the option for data-position-to is not given, it is opened as a context popup.

<div data-role="page" class="ui-page" id="demo-page">
   <div class="ui-content">
      <ul class="ui-listview">
         <li class="ui-li-anchor"><a href="#ctxpopup_vertical_basic" data-inline="true" data-rel="popup">Vertical Basic</a></li>
      </ul>
       
      <div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
         <ul class="ui-listview">
            <li class="ui-li-anchor"><a href="#" data-rel="back">Copy</a></li>
            <li class="ui-li-anchor"><a href="#" data-rel="back">Cut</a></li>
            <li class="ui-li-anchor"><a href="#" data-rel="back">Paste</a></li>
            <li class="ui-li-anchor"><a href="#" data-rel="back">Clipboard</a></li>
         </ul>
      </div>
   </div>
</div>

Options

Option	Input type	Default value	Description
data-position-to	string	"origin"	Element relative to which the popup is centered.
data-close-link-selector	string	'a[data-rel="back"]'	Selector for the close buttons in the popup.
data-transition	string	"pop"	Default transition for the popup.
data-arrow	string	"b, t, r, l"	Sets directions of popup's arrow by priority ("l" for left, "t" for top, "r" for right, and "b" for bottom). The first one has the highest priority.
data-direction-priority	Array	["bottom","top", "right", "left"]	DEPRECATED since 2.4

Events

To handle popup events, use the following code:

<!--Popup HTML code-->
<div id="popup" data-role="popup">
   <p>This is a completely basic popup, no options set.</p>
</div>
<script>
   // Use popup events
   var popup = document.getElementById("popup");
   popup.addEventListener("popupafteropen", function() 
   {
      // Implement code for popupafteropen event
   });
</script>

Summary

Mobile Popup has three more events including Base Popup Events. The following are the mobile-specific popup events.

Name	Description
popupafteropen	Triggered when process of opening a popup is completed. The event is triggered when the popup has completely appeared on the screen and all associated animations have completed.
beforeposition	Triggered before a popup computes the coordinates where it appears. The event is triggered before the popup starts the opening animations and calculates the coordinates. Handling this event gives an opportunity to modify the content of the popup before it appears on the screen.
popupafterclose	Triggered when the process of closing a popup is completed. The event is triggered when the popup has completely disappeared from the screen and all associated animations have completed.

Managing a Popup

Open Popup

There are 2 ways to open a popup:

• Open by clicking on a link:

  If the link has the id of the popup set as the value of the href property, the popup is opened after clicking on the link.

  <!--Definition of link, which opens popup with popup id-->
  <a href="#popup">Click to open popup</a>
  <div id="popup" data-role="popup">
     <p>This is a completely basic popup, no options set.</p>
  </div>
  

• Open manually:

  To open a popup with the "popup" id property, the tau namespace can be used.:

  <div id="popup">
     <p>This is a completely basic popup, no options set.</p>
  </div>
  <script>
     var popupElement = document.getElementById("popup"),
         popup = tau.widget.Popup(popupElement);
     popup.open();
  </script>
  

  With the TAU API, you can open a popup anywhere:

  <div id="popup">
     <p>This is a completely basic popup, no options set.</p>
  </div>
  <script>
     tau.openPopup("#popup");
  </script>
  

Close Popup

There are 2 ways to close a popup:

• Close by clicking on a button inside:

  If the link inside the popup has the data-rel="back" property, the popup is closed after clicking on it.
  The selector, which causes closing on click, can be changed by setting the closeLinkSelector option in the popup:

  <div id="1btn_popup" class="ui-popup">
     <div class="ui-popup-header">Popup Header</div>
     <div class="ui-popup-content popup-content-padding">
        Lorem ipsum dolor sit amet,
        consectetur adiptiscing elit, sed
        doei usmod tempore sit ipsum
     </div>
     <div class="ui-popup-footer">
        <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
     </div>
  </div>
  

• Close manually:

  To close a popup with the "popup" id property, the tau namespace can be used:

  <a href="#popup" data-position-to="window">Click to open popup</a>
  <div id="popup" data-role="popup">
     <p>This is a completely basic popup, no options set.</p>
  </div>
  <script>
     var popupElement = document.getElementById("popup"),
         popup = tau.widget.Popup(popupElement);
     // Close popup after opening
     popupElement.addEventListener("popupafteropen", function () 
     {
        popup.close();
     });
  </script>
  

  With the TAU API, you can close a popup anywhere:

  <div id="popup">
     <p>This is a completely basic popup, no options set.</p>
  </div>
  <script>
     tau.closePopup();
  </script>