widget:popup

Purpose

The main element for a Popup widget.

Contained by

Contains

Attribute groups

Actions

Action Description
dismiss Causes the popup to be hidden. If the popup is already hidden it has no effect.
show Causes the popup to be displayed. If the popup is already displayed it has no effect.

Event

Event Description
dismissed Raised when a popup is dismissed.

Examples

<?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>

Related topics