Animated Fullscreen Modal Plugin with jQuery and CSS3 - Modalica

File Size: 66.5 KB
Views Total: 5376
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Animated Fullscreen Modal Plugin with jQuery and CSS3 - Modalica

Modalica is a really simple jQuery plugin to create responsive, full window modal boxes on your web page/application, animated with CSS3 transitions and transforms.

Basic Usage:

1. Load the required CSS and scripts in the document.

<link rel="stylesheet" href="css/modalica.css">

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/modalica.js"></script>

2. Create a link/button to toggle a modal box. Use href attribute to specify which modal box will be triggered.

<a href="#modal-content" class="modalica">Click me</a>

3. Create the content for the modal box.

<div class="modalica--content" id="modal-content">
  ... Modal content goes here ...
</div>

4. Call the plugin on the toggle link/button and we're done.

$(document).ready(function() {
  $('.modalica').modalica();
});

Change log:

2015-01-08


This awesome jQuery plugin is developed by rmnbrd. For more Advanced Usages, please check the demo page or visit the official website.