Skip to content

Instantly share code, notes, and snippets.

@juriansluiman
Created November 26, 2011 20:24
Show Gist options
  • Save juriansluiman/1396252 to your computer and use it in GitHub Desktop.
Save juriansluiman/1396252 to your computer and use it in GitHub Desktop.
jQuery plugin for modal dialogs
<!--
First use case: ask for a confirmation before requesting the uri in the hyperlink
Everything works with html5 data attributes. Possible options:
* data-template: id in dom or uri for contents of modal. This attribute is required
* data-title: title of the modal
* data-method: specify a GET or POST request, defaults to GET
* data-submit: specify the label of the button to continue to the link, defaults to "Submit"
* data-cancel: specify the label of the button to cancel the modal, defaults to "Cancel"
* data-* : every other attribute can be used to replace keys in the template
Example for the key usage:
Specify a data-name as "Foo" and a template with %name%. In this template %name% will be
replaced by "Foo".
->
<!-- Option #1 -->
<a href="/delete" class="popup" data-title="Delete Foo?" data-template="#template" data-method="post" data-submit="Delete"
data-cancel="Return" data-name="Foo">Delete</a>
<div id="template">Are you sure you want to delete %name%</div>
<!-- Option #2 -->
<a href="/delete" class="popup" data-title="Delete Foo?" data-template="http://domain.tld/template" data-method="post"
data-submit="Delete" data-cancel="Return" data-name="Foo">Delete</a>
<!--
Second use case: display a form in a modal dialog
The returned response should contain a <form> element. This form is injected as content into the
modal dialog. A form can be submitted with one button, the modal is cancelled with another
button. As a third option, it is possible to submit the form and create a new modal with a new
empty form, to allow quick processing of multiple entries.
Possibilities:
* When the form contains errors [1] and is returned, the modal is updated and displayed again
in the modal
* When the response is a redirect, the client is redirected to this uri
[1] Currently the method Zend Framework uses will be supported: an <ul> with a class "errors"
should be present. If this element is not present in the response, it's assumed the post was
successful.
-->
<a href="/create" class="popup" data-title="Create new Foo" data-submit="Add" data-cancel="Return"
data-submit-reopen="Add another">Add new</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment