Modal Popup
Last modified by Simon Urli on 2023/10/10
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. 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.
- 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
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 AutoSuggestWidget) 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'});">
<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:
- Confirmation Box widget
- Jump to page widget
- Confirmed Ajax Request Box
Tips
Check out the Javascript code:
- for your wiki instance: http://localhost:8080/xwiki/bin/skin/resources/js/xwiki/widgets/modalPopup.js
- from GitHub: http://www.github.com/xwiki/xwiki-platform/tree/master/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/js/xwiki/widgets/modalPopup.js.
Check out the CSS code:
- for your wiki instance: http://localhost:8080/xwiki/bin/skin/resources/js/xwiki/widgets/modalPopup.css
- from GitHub: http://www.github.com/xwiki/xwiki-platform/tree/master/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/js/xwiki/widgets/modalPopup.css.
