Modal Popup

Last modified by Simon Urli on 2023/10/10

This tutorial is a work in progress.

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


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

Object that defines the content of the modal dialog.
Object that defines the shortcuts that will pop up the dialog. It is a map of the form { "action" : actionObject, etc. } , where actionObject has a method to execute, a keys list of keyboard shortcut strings and a common map of keyboard shortcut options to be used for all the defined shortcuts. 
Object that defines the options for the modal dialog: title, displayCloseButton, extraClassName, screenColor, borderColor, titleColor, backgroundColor, screenOpacity, verticalPosition and horizontalPosition.


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
      "show"  : { method : this.showDialog,  keys : [] },
      "close" : { method : this.closeDialog, keys : ['Esc'] }
         displayCloseButton : true,
         verticalPosition : "top",
         backgroundColor : "#FFF"
/** 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,
      onSuccess: function(transport){
       var response = transport.responseText || "no response text";
      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 AutoSuggestWidget) and just call the new widget from the wiki page:

<a href="#" onclick="new XWiki.widgets.MyModalPopup({pageURL: '$pageURL'});">

Check out the example above live: My Modal Popup.

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


Check out the Javascript code:

Check out the CSS code:

Get Connected