Modal Popup Widget

The Modal Popup Widget is bundled with XWiki Enterprise and it is used as base class for other modal widgets like the {{sectionAnchor document="ConfirmationBoxWidget section="" label="Confirmation Box widget" /}}, the "Jump to Page" widget and the "Confirmed Ajax Request Box". Since it should not used by itself, the Modal Popup won't display a dialog box.

Constructor Fields for the "ModalPopup" Class

The constructor for the "ModalPopup" class is called with the following parameters:

  • content is an object that defines the content of the modal dialog.
  • shortcuts is an object that defines the shortcuts that will pop up the dialog. For the "Jump to Page" widget, the shortcut keys are "CTRL+META" and "CTRL+G". More specifically, shortcuts is a map having 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. More details are available here to be used for all the defined shortcuts. For the list of available XWiki keyboard shortcuts, check the documentation page listed in the "Related Pages" section, under "User Guide".
  • options is an object that defines the options for the modal dialog:
OptionDefault value


We will use the Modal Popup widget to load the wiki page from the Auto-Suggest Widget tutorial that uses a custom service page. The only difference is that the code from the "XWiki.JavaScriptExtension" object attached to "Code.SuggestWidgetTest" will be moved inside a function, "suggestWidget()" as follows:

var suggestWidget = function(){
  var myInput = $('suggestWidget');
 // Create the suggest widget by instantiating XWiki.widgets.Suggest
  var mySuggest = new XWiki.widgets.Suggest(myInput, {
    script: "$xwiki.getURL('Code.SuggestWidgetTestService', 'get', 'outputSyntax=plain')&",
    varname: "q",
    icon: "$xwiki.getSkinFile('icons/silk/page_white_picture.gif')",
    noresults: "No results",
    json: true,
    resultsParameter : "results",
    resultValue : "value",
document.observe("xwiki:dom:loaded", function(){

Next, we will create another wiki page, "Code.ModalPopupTest" and add an "XWiki.JavaScriptExtension" object containing the "ModalPopup" JavaScript class. This class will be used as base class for the widget that loads the content of "Code.SuggestWidgetTest" and the auto-suggest:

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

The name of the widget, "MyModalPopup" is defined in the line:

XWiki.widgets.MyModalPopup = Class.create(XWiki.widgets.ModalPopup, {}

A very important detail is making sure to call the "suggestWidget()" function when making the Ajax request. Otherwise, we will only get the HTML of the page "Code.SuggestWidgetTest", which is an empty input and the auto-suggest won't work:

new Ajax.Request(data.pageURL,
      onSuccess: function(transport){
        var response = transport.responseText || "no response text";
      onFailure: function(){ content.insert('Something went wrong...');

Finally, we will edit the page "Code.ModalPopupTest" in "Wiki" mode and add the following lines:

#set ($discard = $xwiki.jsx.use("Code.SuggestWidgetTest"))

<a href="#" onclick="new XWiki.widgets.MyModalPopup({pageURL: '$pageURL'});">Click me to open a pop-up</a>


In order for the pop-up to appear, we still need to explicitly add it to the page "Code.SuggestWidgetTest", even though we have defined the URL for it:


<input type="text" id="suggestWidget" />


The final result will be:


If we then click on the "Click me to open a pop-up" link, the modal popup window will appear with an HTML input:


Once we start typing something, the auto-suggest will display the possible results that have been defined in the page "Code.SuggestWidgetTestService":



Related Pages

Search this space


Most popular tags

Failed to execute the [groovy] macro
  1. access rights
  2. activity stream
  3. annotation
  4. attachment
  5. comment
  6. Document Tree Macro
  7. export
  8. Extension Manager
  9. Flamingo skin
  10. global user
  11. Groovy event listener
  12. group
  13. nested page
  14. search
  15. skin
  16. syntax
  17. user
  18. user profile
  19. velocity macros
  20. wiki
  21. wysiwyg
  22. XWiki Applications
  23. xwikiattachment_archive table
  24. xwikiattachment table
  25. xwikiattrecyclebin table
  26. xwikiproperties table

[Display all tags from this space]