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.
Include jQuery (preferably version 2.0.0+) and plug-in files:
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>
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>
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="..."
To adjust background, simply set is in data attribute:
– open the dialog programmatically:
– close the modal dialog:
By default the dialog is closed by ESC or clicking out of the dialog.
License: GPL 3
Get CSS3 and jQuery modal dialog plugin from GitHub:
You may also like:
Bootbox.js – easy Bootstrap modal dialogs
jQuery Bootstrap alerts – BS Alerts
CSS modal dialogs tutorial