Modal Popup UI Component

Version 7.2 by Manuel Smeria on 2013/01/24
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

This tutorial is a work in progress.

This is a Javascript widget bundled by default with the XWiki platform.

Usage

The Modal Popup is a widget used as a base class for different modal widgets in XWiki, like the Confirmation Box or the Jump To Page widget. It will not display a dialog box since it should not be used by itself.

Constructor fields for the ModalPopup Javascript class

content
Object that defines the content of the modal dialog.
shortcuts
Object that defines the shortcuts that will pop up the dialog.
options
Object that defines the options for the modal dialog: title, displayCloseButton, extraClassName, screenColor, borderColor, titleColor, backgroundColor, screenOpacity, verticalPosition and horizontalPosition.

Examples

The Modal Popup Javascript class could be used as a base class for a widget that loads the content of another page:

// Make sure the XWiki 'namespace' and the ModalPopup class exist.
if(typeof(XWiki) == "undefined" || typeof(XWiki.widgets) == "undefined" || typeof(XWiki.widgets.ModalPopup) == "undefined") {
if (typeof console != "undefined" && typeof console.warn == "function") {
    console.warn("[MessageBox widget] Required class missing: XWiki.widgets.ModalPopup");
  }
} else {

XWiki.widgets.MyModalPopup = Class.create(XWiki.widgets.ModalPopup, {
/** Default parameters can be added to the custom class. */
  defaultInteractionParameters : {
  },
/** Constructor. Registers the key listener that pops up the dialog. */
  initialize : function($super, interactionParameters) {
  this.interactionParameters = Object.extend(Object.clone(this.defaultInteractionParameters), interactionParameters || {});
   // call constructor from ModalPopup with params content, shortcuts, options
    $super(
    this.createContent(this.interactionParameters),
      {
      "show"  : { method : this.showDialog,  keys : [] },
      "close" : { method : this.closeDialog, keys : ['Esc'] }
      },
      {
         displayCloseButton : true,
         verticalPosition : "top",
         backgroundColor : "#FFF"
      }
    );
  this.showDialog();
  this.setClass("my-modal-popup");
  },
/** Get the content of the modal dialog using ajax */
  createContent : function (data) {
   var content =  new Element('div', {'class': 'modal-popup'});
   // get page content for the pageURL
    new Ajax.Request(data.pageURL,
    {
      method:'get',
      onSuccess: function(transport){
       var response = transport.responseText || "no response text";
        content.insert(response);
      },
      onFailure: function(){ content.insert('Something went wrong...');
    }
    });

   return content;
  }
});
} // if the parent widget is defined

Define the URL of the page to be loaded (in this case the AutoSuggestWidgetExample) and just call the new widget from the wiki page:

#set($pageURL="$xwiki.getURL('DevGuide.AutoSuggestWidgetExample','view','xpage=plain')")
<a href="#" onclick="new XWiki.widgets.MyModalPopup({pageURL: '$pageURL'});">
// Make sure the XWiki 'namespace' and the ModalPopup class exist.
if(typeof(XWiki) == "undefined" || typeof(XWiki.widgets) == "undefined" || typeof(XWiki.widgets.ModalPopup) == "undefined") {
 if (typeof console != "undefined" && typeof console.warn == "function") {
    console.warn("[MessageBox widget] Required class missing: XWiki.widgets.ModalPopup");
  }
} else {

XWiki.widgets.MyModalPopup = Class.create(XWiki.widgets.ModalPopup, {
 /** Default parameters can be added to the custom class. */
  defaultInteractionParameters : {
  },
 /** Constructor. Registers the key listener that pops up the dialog. */
  initialize : function($super, interactionParameters) {
   this.interactionParameters = Object.extend(Object.clone(this.defaultInteractionParameters), interactionParameters || {});
    // call constructor from ModalPopup with params content, shortcuts, options
    $super(
     this.createContent(this.interactionParameters),
      {
       "show"  : { method : this.showDialog,  keys : [] },
       "close" : { method : this.closeDialog, keys : ['Esc'] }
      },
      {
         displayCloseButton : true, 
         extraClassName : 'mydialog-box',
         verticalPosition : "top",
         backgroundColor : "#FFF"
      }
    );
   this.showDialog();
   this.setClass("my-modal-popup");
  },
 /** Get the content of the modal dialog using ajax */
  createContent : function (data) {
    var content =  new Element('div', {'class': 'modal-popup'});
    // get page content for the pageURL
    new Ajax.Request(data.pageURL,
    {
      method:'get',
      onSuccess: function(transport){
        var response = transport.responseText || "no response text";
        content.insert(response);
      }.bind(this),
      onFailure: function(){ content.insert('Something went wrong...'); 
    }
    });

    return content;
  }
});
} // if the parent widget is defined

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [xwiki:Documentation.DevGuide.FrontendResources.ModalPopup.WebHome]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

Widgets bundled by default with XWiki build on top of the Model Popup class:

Tips

Check out the Javascript code:

Check out the CSS code:

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected