Creating a popup

The Popup widget is used to inform the user of some event without disrupting the page that is being viewed. It is initially hidden by default, and appears as a result of some external trigger and displays some information to the user.

Visual appearance

The appearance of the popup depends on its content. When it is visible it overlays part or all of the visible area of the page. It has an optional dismiss button that the user can use to hide the popup.

User interactions

The only user interaction supported by the Popup widget is the 'dismiss' action. If the user clicks the dismiss button, the popup disappears.

Note:

The Popup widget must have a layout associated with it, to separate content from the container. If none is specified, then it will have an implicit layout containing a single region.

XDIME 2 elements

The widget:popup is the containing element. The optional widget:dismiss element provides labels for dismissing the popup. If you do not provide one, you should hide the popup with some external event.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:popup</title>
  </head>
  <body>
    <widget:popup id="popup">
      <p>Hello world! <widget:dismiss>X</widget:dismiss></p>
      <p>
        <a href="javascript:Widget.getInstance('popup').dismiss('yes')">Dismiss 'yes'</a> | <a
          href="javascript:Widget.getInstance('popup').dismiss('no')">Dismiss 'no'</a>
      </p>
      <widget:button action="popup#dismiss">dismiss button</widget:button>
    </widget:popup>
    <div>
      <a href="javascript:Widget.getInstance('popup').show()">click me</a>
    </div>
  </body>
</html>

You can use the load, refresh or fetch actions to retrieve the content of a popup from an external source using AJAX. Please note that widget:load, widget:refresh or widget:fetch must be placed before the widget:block-content element.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:popup</title>
  </head>
  <body>
    <widget:popup id="popup">
      <widget:block>
        <widget:load src="ajax-popup-response.xdime" when="onload"/>
        <widget:block-content>
          <p>loading...</p>
        </widget:block-content>
      </widget:block>
      <widget:dismiss>dismiss</widget:dismiss>
    </widget:popup>
    <div>
      <widget:button action="popup#show">click me</widget:button>
    </div>
  </body>
</html>

The response should have the following structure.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <response:body>
    <widget:block-content>
      <p>Content retrieved using AJAX.</p>
    </widget:block-content>
  </response:body>
</response:response>

Non-client fallback

If the device does not support the Popup widget, and you specified that it should initially be visible. then it is displayed in the position specified. Otherwise, it is completely ignored and does not generate any output markup.

JavaScript

This widget supports JavaScript. See JavaScript support for details.