JQuerySimpleModal < System

You are here: BACCHUS Wiki>System Web>JQueryPlugin>JQuerySimpleModal (revision 1) (raw view)
---+ %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.

__Note:__ please consider using [[%SYSTEMWEB%.JQueryUIDialog][UI::Dialog]] instead.
%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, 8
   * Firefox 2, 3, 4
   * 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

<div class="foswikiHidden">
%STARTSECTION{"helpText"}%<div class="foswikiDialog foswikiFormSteps" id="helpText">
<h2 class="foswikiDialogTitle jqSimpleModalDraggable">Contact</h2>
  <form>
  <div style="width:600px; height:400px; overflow-x:hidden; overflow-y:auto; padding-right:1em;">
    <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 class="foswikiFormStep">
      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>
  </div>
  <div class="foswikiFormStep foswikiFormButtons">
    %BUTTON{"%MAKETEXT{"Submit"}%" icon="tick" class="jqSimpleModalOK"}%
    %BUTTON{"%MAKETEXT{"Cancel"}%" icon="cross" class="jqSimpleModalCancel foswikiRight"}%
    %CLEAR%
  </div>
  </form>
</div>%ENDSECTION{"helpText"}%
</div>
Topic revision: r1 - 08 Sep 2011, ProjectContributor
System
Copyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding BACCHUS Wiki? Send feedback