A nice CSS3 and jQuery modal dialog – Adaptive Modal

I’ve looked for a nice jQuery modal dialog plugin, with smooth animations on open and close. Adaptive Modal was perfect.

Adaptive Modal – a jQuery modal dialog plugin

This is a lightweight, easy in use (but with many options) plugin, compatible with modern browsers.

CSS3 and jQuery modal dialog
CSS3 and jQuery modal dialog

Usage

Include jQuery (preferably version 2.0.0+) and plug-in files:

– jquery.adaptive-modal.js
– adaptive-modal.css

What’s next? All what we have to do is adding link to open the dialog:

...
  <a href="#" data-toggle="adaptive-modal" data-title="...">...</a>
...

Cool enough?

The content inside data-title will be used on the modal window. The data-title also supports HTML tags.

However, instead of storing your content inside data-title, we can have them separately in another div container and reference the id of that container in the href attribute, for example:

...
  <a href="#form" data-toggle="adaptive-modal">...</a>
  <form id="form">
  ...
  </form>
...

Moreover, we can utilize the built-in Ajax request by simply define the AJAX URL inside href attribute and add data-remote=”true” to the markup:

...
  <a href="http://my-ajax-url" data-type="..."
   data-datatype="..." 
   data-remote="true" data-toggle="adaptive-modal">...</a>
...

To adjust background, simply set is in data attribute:

data-am-custom-bgcolor=”#000″

Public methods

– open the dialog programmatically:

$("#my-link").openModal()

– close the modal dialog:

$("#my-link").closeModal()

By default the dialog is closed by ESC or clicking out of the dialog.

License: GPL 3

Demo:

http://www.thepetedesign.com/demos/adaptive-modal_demo.html

Get CSS3 and jQuery modal dialog plugin from GitHub:

https://github.com/peachananr/adaptive-modal

You may also like:

Bootbox.js – easy Bootstrap modal dialogs

jQuery Bootstrap alerts – BS Alerts

CSS modal dialogs tutorial

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1