Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 24 hours ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 5 days ago

Designer, software engineer and a content writer. Working as a web developer in a local company and studying to become a graphic designer.

Papermashup

Awesome modals with animatedModal.js

Slick fullscreen modal windows with css animations

HiraHira

Recently we had to use animatedModal.js in a project. The brilliant work of João Pereira. Let’s explore this jQuery plugin in more detail and how to use it on your site. We used it in the product comparison plugin post that you can see here

The animatedModal.js is basically used to create CSS3 transitions. The plugin produces a responsive full screen modal with transitions. There are transitions available in the CSS file of the modal as well if you want to use them. If you want to animatedModal.js in a project you would need to know how to integrate the plugin in your code.

If you want to use the CSS3 transitions in your code then first of all you need to load the animate.css in the head of your webpage.

<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

</head>

In the body tag, you need to add a snippet of code which looks like this;

The HTML

<body>
<a id="demo" href="#animatedModal">DEMO</a>

<div id="animatedModal"> <div class="close-animatedModal"> CLOSE MODAL </div> <div class="modal-content"> <!--Your modal content goes here--> </div> </div> </body>

An important thing here is that when you are writing the code to close the modal, the class name has to match the name given on the ID class. Like the name here in ID was “animatedModal” and that’s the same name we used when closing the modal. You can add a button on your webpage to close the transition modal as well. In the next div tag you have to include the content. The content depends on how you want to use this plugin and what transitions you want to show on your webpage.

Your work is not yet done. At the bottom and before your closing body tag you need to include the libraries;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/animatedModal.min.js"></script>

Now you have included all the files that were required. Here’s an example of how to do this;

The JavaScript

<script>
$("#demo").animatedModal({
modalTarget:'modal-02',
animatedIn:'lightSpeedIn',
animatedOut:'bounceOutDown',
color:'#3498db',
// Callbacks
beforeOpen: function() {
console.log("The animation was called");
},
afterOpen: function() {
console.log("The animation is completed");
},
beforeClose: function() {
console.log("The animation was called");
},
afterClose: function() {
console.log("The animation is completed");
}
});
</script>

Because this plugin takes advantage of animate.css written by Daniel Eden we have a huge amount of options for animating the modal on both open and close.

Here’s a breakdown of the plugin options;

VariableDefault ValueOptionsDescription
modalTargetanimatedModalCustomize your target
color#39BEB9HEX, HSL, RGB, RBADefine background color
animatedInzoomInChoose HereTransition when the modal goes in
animatedOutzoomOutChoose HereTransition when the modal goes out
animationDuration.6ssecondsAnimation duration
overflowautoscroll; hidden; auto;This makes your modal scrollable or not

I hope you found this tutorial beneficial. The animatedModal.js can be quite handy if you want to use or create CSS3 transitions in a webpage. If you have any queries you can ask in the comments.

Demo Download

Designer, software engineer and a content writer. Working as a web developer in a local company and studying to become a graphic designer.

    Comments 0
    There are currently no comments.