ModalBoxAddOn < TWiki21Nov

TWiki21Nov Web>ModalBoxAddOn (2012-09-09, TWikiContributor) (raw view)
---+!! !ModalBoxAddOn
<!--
   Contributions to this add-on are appreciated. Please update the contrib page at
   http://twiki.org/cgi-bin/view/Plugins/ModalBoxAddOn or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ModalBoxAddOnDev.
   If you are a TWiki contributor please update the add-on in the SVN repository.
-->
<sticky><div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div></sticky>
%SHORTDESCRIPTION%

---++ Overview

This add-on offers modal dialog boxes based on the [[http://jqueryui.com/demos/dialog/][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.

<a href="%ATTACHURLPATH%/screenshot.png"><img src="%ATTACHURLPATH%/screenshot-small.png" alt="screenshot.png" width="300" height="153" alt="Screenshot - click to enlarge" title="Screenshot - click to enlarge" />

---++ 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:
<verbatim>
%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"
}%
</verbatim>

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.

[[http://jqueryui.com/demos/dialog/#option-buttons][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:
<verbatim>
<button id="...">Open dialog box</buttom>
</verbatim>
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:
<verbatim>
%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>
</verbatim>

[[http://jqueryui.com/demos/dialog/#option-buttons][See details of options]] of jQuery Dialog widget.

---++ Test Modal Box

---+++ Test with INCLUDE

<table><tr><td valign="top">
__Raw text:__

<verbatim>
%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"
}%
</verbatim>

</td><td>&nbsp;</td><td valign="top">
__Rendered text:__

%JQTHEME{"smoothness"}%
%INCLUDE{ "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"
}%
</td></tr></table>

---+++ Test with jQuery !JavaScript

<table><tr><td valign="top">
__Raw text:__

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

</td><td>&nbsp;</td><td valign="top">
__Rendered 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>
</td></tr></table>

---+++ Test with jQuery Ajax

This modal dialog box loads %SYSTEMWEB%.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.

<table><tr><td valign="top">
__Raw text:__

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

</td><td>&nbsp;</td><td valign="top">
__Rendered 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>
</td></tr></table>

---++ Modal Box Engine
<style>
.ui-widget { font-size: 100%; }
.ui-widget .ui-widget { font-size: 100%; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 100%; }
</style>

This section defines the modal box so that it can be called with a simple INCLUDE. View the [[%SCRIPTURL{view}%/%WEB%/%TOPIC%?raw=on][raw text]] of this topic to look under the hood.
<!--=====================================
%STARTINCLUDE%<script type='text/javascript'>
$(document).ready(function() {
 var $dialog = $('<div style="text-align: left;"></div>')
  .html("%content%")
  .dialog({
   autoOpen: false,
%IF{ "defined 'title'"     then="   title: \"%title%\","     else="<nop>" }%
%IF{ "defined 'buttons'"   then="   buttons: %buttons%,"     else="<nop>" }%
%IF{ "defined 'height'"    then="   height: %height%,"       else="<nop>" }%
%IF{ "defined 'width'"     then="   width: %width%,"         else="<nop>" }%
%IF{ "defined 'position'"  then="   position: %position%,"   else="<nop>" }%
%IF{ "defined 'resizable'" then="   resizable: %resizable%," else="<nop>" }%
%IF{ "defined 'modal'"     then="   modal: %modal%,"         else="modal: true," }%
%IF{ "defined 'options'"   then="   %options%"               else="<nop>" }%
  });
 $('#%id%').click(function() {
  $dialog.dialog('open');
  return false;
 });
});
</script>
%IF{ "defined 'showbutton'" then="<button id='%id%' class='twikiButton' %IF{ "defined 'buttonstyle'" then="'%buttonstyle%'" }%>%showbutton%</button>" else="<nop>" }%%STOPINCLUDE%
=========================================-->

---++ 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 ==%TOPIC%.zip== in your twiki installation directory. Content:
     | *File:* | *Description:* |
     | ==data/TWiki/%TOPIC%.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: [[http://twiki.net/][Twiki, Inc.]]

|  Add-on Author: | TWiki:Main.PeterThoeny |
|  Copyright: | &copy; 2012 TWiki:Main.PeterThoeny, [[http://twiki.org/][TWiki.org]] <br /> &copy; 2013 TWiki:TWiki.TWikiContributor |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Add-on Version: | 2012-09-08 |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  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:__ %SYSTEMWEB%.TWikiAddOns, JQueryPlugin
Topic revision: r0 - 2012-09-09 - TWikiContributor
TWiki21Nov
- Cern Search
- TWiki Search
- Google Search
TWiki21Nov All webs
Copyright &© 2008-2023 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
or Ideas, requests, problems regarding TWiki? use Discourse or Send feedback