%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1286374614" format="1.1" reprev="4" version="1"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"simplemodal"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
!SimpleModal is a lightweight jQuery plugin that provides a simple
interface to create a modal dialog.
%ENDSECTION{"summary"}%

---++ Description
The goal of !SimpleModal is to provide developers with a cross-browser
overlay and container that will be populated with data provided to
!SimpleModal.

There are two ways to call !SimpleModal:
   1 As a chained function on a jQuery object, like =$('#myDiv').modal();=.
     This call would place the DOM object, #myDiv, inside a modal dialog.
     Chaining requires a jQuery object. An optional options object can be
     passed as a parameter.
   1 As a stand-alone function, like =$.modal(data)=. The data parameter
     is required and an optional options object can be passed as a second
     parameter. This method provides more flexibility in the types of data
     that are allowed. The data could be a DOM object, a jQuery object, HTML
     or a string.

A !SimpleModal call can contain multiple elements, but only one modal
dialog can be created at a time. Which means that all of the matched
elements will be displayed within the modal container.

!SimpleModal internally sets the CSS needed to display the modal dialog
properly in all browsers, yet provides the developer with the flexibility
to easily control the look and feel. The styling for !SimpleModal can be
done through external stylesheets, or through !SimpleModal, using the
overlayCss and/or containerCss options.

!SimpleModal has been tested in the following browsers:
   * IE 6, 7
   * Firefox 2, 3
   * Opera 9
   * Safari 3

---++ Examples

%JQREQUIRE{"simplemodal"}%
%JQICON{"email"}% <a href="#" class="jqSimpleModal {data:'#helpText', onSubmit:function() {alert('you clicked submit')}, onCancel:function() {alert('cancelled')}}">Contact</a>: opens a modal dialog located in the #helpText div.

%JQICON{"email"}% <a href="#" class="jqSimpleModal {url:'%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?skin=text;section=helpText', onSubmit:function() {alert('you clicked submit in the async example')}, onCancel:function() {alert('you cancelled the async example')}}">Contact (async)</a>: opens a modal dialog with content loaded asynchronously from a named section of a topic

%STARTSECTION{"helpText"}%
<div id="helpText" class="foswikiPage foswikiHidden">
<div style="width:600px; height:400px; overflow:auto;margin-bottom:1em;padding-right:1em">
---+!! Contact
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis nisl
 venenatis augue. Nullam lacinia dapibus enim. Duis ut enim at neque viverra
 vestibulum. Nullam blandit massa non tellus. Integer eget justo. Maecenas
 vitae nisl nec justo pellentesque adipiscing. Cras nulla. Phasellus interdum
 mi dapibus nisi. Suspendisse sodales leo ac dui. Duis rhoncus neque sed felis.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

 <div class="foswikiFormSteps">
   <div class="foswikiFormStep">
     <h3>First Name:</h3>
     <input type="text" size="30" class="foswikiInputField" />
   </div>
   <div class="foswikiFormStep">
     <h3>Last Name:</h3>
     <input type="text" size="30" class="foswikiInputField" />
   </div>
 </div>

 Aenean neque lectus, gravida nec, egestas at, scelerisque quis, lectus.
 Suspendisse potenti. Morbi id urna at magna tristique mollis. Praesent
 fermentum sollicitudin turpis. Sed tincidunt gravida est. Morbi non nibh
 ullamcorper lorem consequat tristique. Ut rutrum, diam dignissim congue
 tristique, mauris velit tristique velit, sed laoreet dui mi at ante. In dictum
 massa et quam. Aenean imperdiet elit ut sem. Quisque tincidunt tortor at
 augue. Praesent eu nunc non dolor sagittis euismod. In semper porttitor
 tellus. 

 Sed fermentum justo nec lorem. Morbi augue. Sed tristique semper velit. Nulla
 facilisi. Maecenas fermentum. In massa magna, egestas non, lobortis dictum,
 feugiat vel, eros. Vivamus cursus accumsan enim. Duis vestibulum ipsum. Proin
 at ligula et est vehicula fringilla. Integer tortor risus, porttitor quis,
 posuere sed, sagittis non, sapien.  Donec ornare imperdiet eros. Sed id neque
 et tellus porta commodo. Integer non neque. Morbi porttitor nisi ultricies
 lectus. Suspendisse potenti. Vestibulum ornare tellus vulputate ligula. Nam
 faucibus volutpat nisi. Morbi rhoncus enim ut dolor. Donec congue posuere dui.
 Aliquam mi nunc, lobortis eu, pulvinar et, aliquet vitae, diam. Aliquam in
 tortor. Nam egestas imperdiet lectus. Morbi vitae neque. Praesent pellentesque
 dignissim lacus. Proin neque. Phasellus fermentum sagittis dolor. Nulla enim. 

 In hac habitasse platea dictumst. Etiam sit amet tortor in mi laoreet
 tincidunt. Aliquam cursus pharetra neque. Vivamus pellentesque lacus ac risus.
 Nam aliquet molestie enim. Maecenas blandit, tortor nec tincidunt lacinia,
 tortor velit venenatis velit, et commodo leo tortor nec est. Proin at mi. Ut
 magna est, venenatis et, eleifend sit amet, vulputate eu, mi. Suspendisse sed
 arcu at orci scelerisque lobortis. Sed venenatis pede quis nibh. Vivamus at
 nulla. Etiam congue. Ut eu eros. Nullam tempor rutrum massa.

</div>
%BUTTON{"%MAKETEXT{"Submit"}%" icon="tick" class="jqSimpleModalOK"}%
%BUTTON{"%MAKETEXT{"Cancel"}%" icon="cross" class="jqSimpleModalCancel foswikiRight"}%
%CLEAR%
</div>
%ENDSECTION{"helpText"}%
