Skip to content

Soflomo/jQueryModal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 

Repository files navigation

jQueryModal

This repository contains two jQuery plugins for an enhanced dialog UI experience. In two use cases dialogs are a common element in the UI and these two are covered by two plugins from jQueryModal.

  1. A confirmation dialog: "Are you sure you want to delete this user?" as an example
  2. A form dialog: create a new user with a form inside a popup as an example

Goal of plugins

The plugins are created to provide a method to instantiate both types of modals in a DRY principle. Defaults for the modals can be set in a configuration object, upon instantiation the configuration can be tuned and per element several preferences can be set with html5 data attributes.

Confirmation

The working can be best shown with a simple example. The hyperlink has an uri to delete a user account, a modal is instantiated to ask for confirmation.

<a href="/user/delete" class="confirm" data-name="John Doe">Delete</a>
<div id="tmpl" class="hidden">Are you sure you want to delete %name%</div>

<script>
$('.confirm').confirm({
    template: '#tmpl'
});
</script>

A detailed page about the documentation for the confirmation can be found here.

Forms

The form popup performs a XmlHttpRequest to another page to load some html (especially a <form>) and inserts that into the contents of a dialog. A submit and cancel button are present and the form can be submitted by a normal request or asynchronous XmlHttpRequest. The response can be parsed to check for form errors: if any present, the form is updated with the given response.

<a href="/user/new" class="form">New user</a>

<script>$('.form').form();</script>

A detailed page about the documentation for the form dialog can be found here.

TODO

  1. Implement callbacks when ajax requests started

For forms:

  1. Write better documentation
  2. Implement a "add & create new one" button

About

Dialog plugins for enhanced UI integration

Resources

Stars

Watchers

Forks

Packages

No packages published