Tags:
component1Add my vote for this tag javascript1Add my vote for this tag notification1Add my vote for this tag user_interface1Add my vote for this tag create new tag
, view all tags

ModalBoxAddOn

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.

screenshot.png

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:

%JQTHEME{"smoothness"}%
%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'); } }"
  width="400"
  height="200"
  position="[350,100]"
  resizable="false"
  options="..."
  showbutton="Show dialog"
}%

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>

See details of options of jQuery Dialog widget.

Test Modal Box

Test with INCLUDE

Raw text:

%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.

Raw text:

<script type='text/javascript'>
$(document).ready(function() {
 var $dialog = $('<div></div>')
  .html(
   "<div id='ajax_content'><img src='%ICONURLPATH{processing}%'"+
   " width='16' height='16' border='' alt='' /></div>"
  )
  .dialog({
   autoOpen: false,
   title: 'Ajax Test',
   width: "800",
   height: "600",
   modal: true
  });
 $("#ajax_dialog").click(function() {
  $.get(
   '%SCRIPTURL{view}%/%SYSTEMWEB%/FormatTokens',
   { skin: 'text', contenttype: 'text/plain' },
   function(data) {
    $('div#ajax_content').html(
      "<div style='text-align:left'>"+data+"</div>");
   }, 'text' );
   $dialog.dialog('open');
   return false;
 });
});
</script>
<button id="ajax_dialog" class="twikiButton">Open Ajax dialog box</button>

  Rendered text:

Modal Box Engine

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:
    File: Description:
    data/TWiki/ModalBoxAddOn.txt Add-on topic
    pub/TWiki/screenshot.png Screenshot of example
    pub/TWiki/screenshot-small.png Small screenshot of example
    pub/TWiki/twiki-logo-80x40-t.gif Twiki Inc logo
  • Test if the installation was successful:
    • See examples above

Add-On Info

  • Set SHORTDESCRIPTION = Show modal boxes with TWiki page content disabled and grayed out
  • Sponsor: Twiki, Inc.

Add-on Author: TWiki:Main.PeterThoeny
Copyright: © 2012 TWiki:Main.PeterThoeny, TWiki.org
© 2013 TWiki:TWiki.TWikiContributor
License: GPL (GNU General Public License)
Add-on Version: 2014-06-25
Change History:  
2014-06-25: TWikibug:Item7526: Making it friendly to IE9 and earlier
2012-09-08: TWikibug:Item6837: Adding buttonstyle; Doc fixes
2011-03-28: TWikibug:Item6651: Small fix in Ajax dialog box example
2011-03-05: TWikibug:Item6651: Adding Ajax dialog box example
2011-03-02: TWikibug:Item6651: Initial version
TWiki Dependency: JQueryPlugin version 2011-03-01
CPAN Dependencies: none
Other Dependencies: none
Perl Version: 5.005
Add-on Home: http://TWiki.org/cgi-bin/view/Plugins/ModalBoxAddOn
Feedback: http://TWiki.org/cgi-bin/view/Plugins/ModalBoxAddOnDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/ModalBoxAddOnAppraisal

Related Topic: TWikiAddOns, JQueryPlugin

Topic attachments
I Attachment History Action Size Date Who Comment
Unknown file formatmd5 ModalBoxAddOn.md5 r6 r5 r4 r3 r2 manage 0.2 K 2014-06-25 - 06:27 HideyoImazu  
Compressed Zip archivetgz ModalBoxAddOn.tgz r6 r5 r4 r3 r2 manage 107.1 K 2014-06-25 - 06:26 HideyoImazu  
Compressed Zip archivezip ModalBoxAddOn.zip r6 r5 r4 r3 r2 manage 109.0 K 2014-06-25 - 06:26 HideyoImazu  
Unknown file formatEXT ModalBoxAddOn_installer r4 r3 r2 r1 manage 3.6 K 2014-06-25 - 06:27 HideyoImazu  
Edit | Attach | Watch | Print version | History: r8 < r7 < r6 < r5 < r4 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r8 - 2014-06-25 - HideyoImazu
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.