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">×</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".