Simple Full Screen Modals in Action

Here I’ll show you how to quickly put together an animated full screen modal using the animatedModal.js jQuery plugin. This is a simple one, but adds a lot of utility to your site. I like the concept of taking something that would usually require it’s own page and treating it like a more interactive element. There are a few downsides to this overall concept, but we’ve had fun with it displaying project case studies on our company site.

Before you get into the jQuery functionality of this, go ahead and build out your desired markup and styles in HTML and CSS (or SaSS).

<div>
  <div>
    <h1>Hello, this is my super rad modal!</h1>
  </div>
</div>

Once you’ve got that out of the way, install the Animated.js plug-in and put it in a <script> tag on your HTML.

animatedModal.js

Now we can start adding the appropriate classes to our markup. You’ll notice I added a simple button in the HTML to trigger the modal.

<button id="case-study-modal-trigger" href="#case-study-modal">Click For Modal</button>
<div class="modal-wrapper" id="case-study-modal">
  <div class="modal-container">
    <h1>Hello, this is my super rad modal!</h1>
  </div>
</div>

Now we’ll engage the modal plugin in our JS file like so…

$("#case-study-modal-trigger").animatedModal({
      modalTarget:'case-study-modal',
      animatedIn:'slideInUp',
      animatedOut:'slideOutDown',
      overflow: 'scroll',
      position: 'fixed',
      top: '0px',
      animationDuration:'.7s',
      color: '#EBEBEB'
    });

You’ll notice that the button ID calls the animatedModal function, and the actual modal container ID is shown inside the function. You can play with many different animatedModal settings and try different animations (taken from Animate.css).

The last thing we need to do is add a close element to the modal so the user can close it when they want. AnimateModal.js makes this really easy. You simply add a class with the naming convention below to any element.

<button id="case-study-modal-trigger" href="#case-study-modal">Click For Modal</button>
<div class="modal-wrapper" id="case-study-modal">
  <div class="modal-container">
    <a class="close-case-study-modal">Close Modal</a>
    <h1>Hello, this is my super rad modal!</h1>
  </div>
</div>

There you have it. This is a very quick and dirty rundown of using this plugin, but you can take it in many different directions. I may not have covered everything we used it for, but this should get you started.

Check out animatedModal.js in action at www.thecollective.io by clicking on one of our “In-Depth Case Study” buttons, or clicking the “Contact” button. You can also check out some of our past work while your there too ;).