Created
November 26, 2011 20:24
-
-
Save juriansluiman/1396252 to your computer and use it in GitHub Desktop.
jQuery plugin for modal dialogs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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