Show modal boxes with TWiki page content disabled and grayed out
Overview
This add-on offers modal dialog boxes based on the jQuery Dialog widget. A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.
Usage
There are two options to create modal boxes:
Using INCLUDE
Using jQuery JavaScript
Using INCLUDE
Create a modal box in a TWiki pages by including a jQuery UI theme first, then an INCLUDE. Example:
The JQTHEME variable initializes the jQuery-UI stylesheets and JavaScript. It must be called only once per page.
The INCLUDE defines the modal box. More than one box can be defined per page. This section expects the following include parameters:
id - ID of the dialog box. Must be unique per page. Use only alphanumeric characters and underscore! Required.
title - title of the box. Required.
content - content of the box. Can be of any form, such as HTML with images, CSS and JavaScript. Don't use double quotes. Required.
buttons - buttons defined as JavaScript objects. Optional.
width - width of dialog box. Optional, default "'auto'".
height - height of dialog box. Optional, default "'auto'".
position - postion of dialog box. Optional.
resizable - true or false. Optional, default "true"
showbutton - text of button that opens the dialog box. Optional.
buttonstyle - style of button that opens the dialog box; works only if showbutton is specified. Optional.
options - additional options not listed here. Optional.
See details of options of jQuery Dialog widget.
The dialog box can be opened separately if the showbutton text is not specified. Example button that opens the dialog box when clicked:
<button id="...">Open dialog box</buttom>
The id must match the ID of the box.
Using jQuery JavaScript
Raw JavaScript can be used instead of the INCLUDE to create a dialog box. Example:
%JQTHEME{"smoothness"}%
<script type='text/javascript'>
$(document).ready(function() {
var $dialog = $('<div></div>')
.html("Put dialog content here, use HTML if needed.")
.dialog({
autoOpen: false,
title: "Title of the dialog box",
// add any additional jQuery Dialog options
modal: true
});
$('#MY_UNIQUE_ID').click(function() {
$dialog.dialog('open');
return false;
});
});
</script>
<button id='MY_UNIQUE_ID' class='twikiButton'>Open dialog box</button>
%JQTHEME{"smoothness"}% <!-- once per page only -->
%INCLUDE{ "%SYSTEMWEB%.ModalBoxAddOn"
id="must_be_unique"
title="This is modal box"
content="TWiki <i>keeps</i> getting better and better."
buttons="{ 'OK': function() { $(this).dialog('close'); } }"
showbutton="Open modal dialog box"
}%
Rendered text:
Test with jQuery JavaScript
Raw text:
<script type='text/javascript'>
$(document).ready(function() {
var $dialog = $('<div></div>')
.html("This is the <i>content</i> of the dialog box.")
.dialog({
autoOpen: false,
title: "Title of the dialog box",
// add any additional jQuery Dialog options
modal: true
});
$("#my_unique_id").click(function() {
$dialog.dialog('open');
return false;
});
});
</script>
<button id="my_unique_id" class="twikiButton">Open dialog box</button>
Rendered text:
Test with jQuery Ajax
This modal dialog box loads FormatTokens once the dialog box opens via an Ajax call. The TML (TWiki Markup Language) is loaded as plain text, then placed into the dialog box for rendering.
This section defines the modal box so that it can be called with a simple INCLUDE. View the raw text of this topic to look under the hood.
Installation Instructions
Note: You do not need to install anything on the browser to use this add-on. The following instructions are for the administrator who installs the add-on on the server where TWiki is running.
Download the ZIP file from the Add-on Home (see below)
Unzip ModalBoxAddOn.zip in your twiki installation directory. Content: