Apps and development tools - jQuery Plugins


Modal

The modal plugin toggles your hidden content on demand as a popup. It also adds .modal-open to the <body> and generates a "body-mask" to provide a click area for dismissing shown modals when clicking outside the modal.

Includes

Static include:

<tml:include designdb="@afw" ref="include:jquery" o_jquery-plugins="modal"/>

Dynamic Include:

requirejs(["jquery-modal"], function(Modal){...})

HTML

<div class="modal-popup" id="myModal">

  <div class="header">

    <a data-modal="hide">&times;</a>

    ....

  </div>

  <div class="content">...</div>

  <div class="footer">...</div>

</div>

Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript.

Via data attributes

Activate a modal without writing JavaScript. Set data-modal="show" on a controller element, like a link or a button, along with a data-target="#myModal" or href="#myModal" to target a specific modal to be shown.

<a href="#myModal" data-modal="show">show my modal</a>

Data attribute data-modal="hide" is also possible and hides the modal on click.

The following data attributes are valid:

  • data-modal: shows or hides a modal. Values: "show" or "hide"
  • data-target: specifies the modal to be shown (overwrites the href attribute)

Via JavaScript

Call .wga_modal() on a trigger element (typically a link or a button):

$("a[href='#myModal']").wga_modal(options)

Parameter "options" is optional. Valid properties are

  • target: specify the modal target to be shown on click
  • width: specify the width of the modal in pixel (default ist 600)

Call .wga_modal(<command-string>) on a modal element to directly show a or hide this modal:

$("#myModal").wga_modal("show", callback)

$("#myModal").wga_modal("hide", callback)

Parameter "callback" is optional. Valid commands are "show" and "hide".

Events

  • modal-shown: is fired on both the trigger element (link) and the modal if the modal is shown.
  • modal-closed: is fired on both the trigger element (link) and the modal if the modal is closed.

Sample:

$("#myModal").on("modal-shown", function(){

  console.log("modal is visible now")

}).wga_modal("show")

Global configuration options:

  • $.wga_modal.effect: specifies the used effect when modals are shown. Possible values are "fade" and "slide". The default ist "fade".