Create Modal Windows that can be Morphed from Anything with jQuery.Adaptive-Modal.js

The concept of morphing an element into other types of elements has been around for a little while now but not much has been developed in terms of making it capable for real world situations.

Today, I have decided to take this into my own hands and create a plugin that will let you morph links, blocks, inputs, containers or what have you, into a modal window from anywhere on your website. That plugin is called jQuery Adaptive Modal and I have released the plugin as an open source project for you guys to play around with.

Note: This plugin has been tested on Chrome, Firefox, Safari, on both desktop and mobile. It has not been tested on IE.

Create Modal Windows that can be Morphed from Anything with jQuery.Adaptive-Modal.js


How to Use jQuery.Adaptive-Modal.js

How does this work?

The concept is to animate the element itself and expand it into a modal window when that element is triggered. Sounds simple, but the twist is the element needs to change its position to the center of the page, morph slowly into a modal window that will let the modal content fit right in and memorize the location of that element so that when the modal window is closed, the plugin will know when to animate the modal window back to normal.

Since the modal window needs to be on top of everything, animating the actual element is out of the picture because there’s a chance that the element could be inside a container that already had its z-index specified which makes it impossible for the plugin to bring the modal window to the top.

The workaround I came up with is to clone the element, append the cloned element inside a body tag to make sure that there’s no container wrapping around it, position it right on top of itself and hide the original element. The plugin will then manipulate the cloned element instead. When the modal window is closing, the original content will then be displayed after the cloned content has return to its previous dimension and been remove by the plugin.

This way, the animation will make it seem like the actual element is being morphed, while the cloned one is doing the morphing instead.

Basic Usage

In order to use Adaptive Modal, you will have to first include the latest jQuery library (preferably 2.0.0 or higher) available here, and then include jquery.adaptive-modal.js and adaptive-modal.css which can be found here, into your document’s <head>.

Now, create the HTML markup as follows:

HTML

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

Surprise! That’s all you have to do to get the default functionality up and running. No need to call any JavaScript function or anything, the plugin will detect all the elements with data-toggle set to "adaptive-modal" and it will create a modal window for each one of them automatically. Isn’t that neat? The content inside data-title will be used as the modal window’s content. This data-title attribute also supports HTML tags.

Advanced Usage

Of course, when it comes to utilizing it in a real project, customization will determine the usefulness of this plugin. Here are a few examples of what you could do with Adaptive Modal with only HTML Markup:

Show Existing Content
Instead of using the content inside the data-title attribute, you can define your own inside another div container and reference the id of it in the href attribute like this:

HTML

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

>

Show Remote Content
The good thing about this plugin is that is it supports remote requests via AJAX without you having to fiddle with JavaScript at all. All you have to do is define the AJAX request URL inside the href attribute and set the “data-remote” attribute to true like this:

HTML

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

You can also determine your own ajax type and datatype with data-type and data-datatype attributes respectively. Otherwise, the type will be defaulted to GET and the datatype will be defaulted to HTML.

Custom Class Names On Each Modal
You can also define your own class name in case you want to customize the look and feel of each modal windows by defining your custom class name with data-am-custom-class attribute:

HTML

<body>
  ..
  <a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-class="custom-class-name">...</a>
  ..
</body>

Custom BG Color On Show
There will be a time when the element triggering the modal window doesn’t have a background color the plugin can derive from to be used on the modal window. You can define the background color of the modal window by adding the data-am-custom-bgcolor attribute to your markup like this:

HTML

<body>
  ..
  <a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-bgcolor="#000">...</a>
  ..
</body>

More Options

Now let’s talk about all the options that you can play around with using JavaScript. In case you want to define a global option that will be applied across the board instead of relying on HTML markups, you can initiate the function with JavaScript as well.

JS

$(".am-remote-link").adaptiveModal({
   elementAnimateTime: 100, 
   customBgColor: "#333", 
   remoteUrl: false,
   elementAnimateIn: "scaleShow",
   elementAnimateOut: "scaleHide",
   beforeAnimate: function(el, status) {}, 
   afterAnimate: function(el, status) {}, 

   // Deafult Ajax Parameters.
   type: "GET",
   async: true,
   complete: function(xhr, text) {},
   cache: true,
   error: function(xhr, text, e) {},
   global: true,
   headers: {},
   statusCode: {},
   success: function(data, text, xhr) {},
   dataType: "html"
 })

elementAnimateTime: This option lets you define the animation time for each modal window content to be animated when the modal window is either opened or closed. The option accepts milliseconds. The default value is 100.

customBgColor: This option is the same as defining a data-am-custom-bgcolor attribute with your own color to each element, but this one applies globally. The option accepts HEX, RGB, and RGBA The default value is #333333.

remoteUrl: You can define the remote URL here as well as via href attribute with data-remote set to true. The option accepts generic URL. The default value is false.

elementAnimateIn: In order to use this option, you will need a CSS3 animation library such as Animate.css included inside the <head> tag. With Animate.css class names, you can add them here to define the entrance animation for the element inside the modal. The default value is the built-in scaleShow animation.

elementAnimateOut: Likewise, you will a CSS3 animation library such as Animate.css as well for this. With Animate.css class names, you can add them here to define the exit animation for the element inside the modal. The default value is the built-in scaleHide animation.

beforeAnimate: This is a callback function that will be executed before the animation begins. Parameters available are el, and status which returns the jQuery object and the status of the animation, ie "open" will return when the animation is opening the modal window, and vice versa, respectively.

afterAnimate: This is a callback function that will be executed after the animation stops. Parameters available are el, and status which returns the jQuery object and the status of the animation, ie "close" will return when the animation is closing the modal, and vice versa, respectively.

*For type, async, cache, complete, error, global, headers, statusCode, success, and dataType, these options are the same as the default jQuery AJAX options which you can read more about here.

Callbacks

I have added a few callbacks so that you can extend the functionality to match your needs on your projects. Here are all the callbacks:

beforeAnimate: function(el, status)
This callback function will be called right before the animation starts. Parameters returned are el which returns the jQuery object and status which returns the status of the animation, ie "open" will be returned when the animation is opening the modal, and "close" will be returned when the animation is closing the modal window.

JS

$(".am-remote-link").adaptiveModal({
    beforeAnimate: function(el, status) {
      ...
    }
  });

afterAnimation: function(el,status)
This callback function will be called right after the animation stops. Parameters returned are el which returns the jQuery object and status which returns the status of the animation, ie "open" will be returned when the animation is opening the modal, and "close" will be returned when the animation is closing the modal window.

JS

$(".am-remote-link").adaptiveModal({
    afterAnimate: function(el, status) {
      ...
    }
  });

Public Methods

You can also trigger the modal windows programmatically by calling these public methods:

$.fn.openModal()
You can open the modal programmatically by calling this function as shown below:

JS

$(".am-remote-link").openModal()

$.fn.closeModal()
And last but not least, you can also close the modal programmatically by calling the function like this:

JS

$(".am-remote-link").closeModal()

[tuts demo="http://www.onextrapixel.com/examples/adaptive-modal/" download="http://www.onextrapixel.com/examples/adaptive-modal/adaptive-modal.zip"]

Conclusion

And that’s all the features of the Adaptive Modal plugin. Wasn’t that a lot to digest? Since the purpose of the plugin is to test out whether the concept of morphing elements is ready for the real world or not, the more features I added, the better the outcome. I can’t wait to see what you will do with the plugin. If you have any questions or suggestions, please do let me know in the comments below.