Simple Clean jQuery Modal Plugin with CSS3 Animations

File Size: 179 KB
Views Total: 4413
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Clean jQuery Modal Plugin with CSS3 Animations

Yet another jQuery modal plugin that makes it easier to display Html content in a popup window with CSS3 transitions and transforms.

How to use it:

1. Include jQuery javascript library and the jQuery modal's javascript and CSS in the head section of the page.

<link href="stylesheets/jquery.modal.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="javascripts/jquery.modal.js" type="text/javascript"></script>

2. Create Html contents for your modal box.

<div class="modal fade">
  <div class="header">...</div>
  <div class="content">...</div>
  <div class="footer">...</div>
</div>

3. Create a link to toggle the modal.

<a class="try" href="#">Try</a>

4. The javascript.

(function() {
  $(function() {
    return $('.try').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $('.modal').modal();
    });
  });

}).call(this);

Change log:

v1.1.8 (2014-07-11)

  • fixing namespace clash

v1.1.7 (2014-07-10)

  • new version

v1.1.4 (2014-07-04)

  • some fixes to properly enable static modals

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