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


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">

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-remote="true" data-toggle="adaptive-modal">...</a>

To adjust background, simply set is in data attribute:


Public methods

– 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