Super Simple jQuery Modal Plugin - Basic Modal

Basic Modal is a lightweight (~3kb) and easy-to-use jQuery plugin that allows you to create the most basic modal with fade or slideDown animation effects on the page.  You can use either data-* attribute or javascript to implement the modal effect as you wish. 

How to use it:

1. Include jQuery library and jQuery Basic Modal on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="basic-modal.jquery.min.js"></script> 

2. Markup

<p><a href="#" class="trigger-modal" >Trigger modal</a></p>
<p><a href="#" data-trigger-modal="my-modal-2" data-modal-options='{"closeModalClass":"exit", "animation":"fade", "animationSpeed":200}' >Trigger modal 2</a></p>

<div class="modal" id="my-modal" style="display:none;">
<p>This is my modal.</p>
<p><a href="#" class="close-modal">Close</a></p>
</div>
<div class="modal" id="my-modal-2" style="display:none;">
<button class="exit" style="position: absolute; top: 10px; right: 10px;">Close</button>
<p>This is my modal 2.</p>
</div>

3. The CSS

#modal-backdrop {
  background-color: rgba(0,0,0,.5);
}
.modal {
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.3);
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0,0,0,.3);
  height: 200px;
  padding: 20px;
  width: 600px;
}

4. The javascript (Only for Modal 1)

<script>
$(function() {
$('a.trigger-modal').on('click', function( e ) {
e.preventDefault();
$('#my-modal').modal({
animation : 'slideDown', // fade or slidedown
offsetTop: 60, 
backdropAnimation : true,
backdropAnimationDuration : 100
}).css('border','6px solid #222');
});
});
</script>

Change Log:

v0.0.7 (2013-04-07)

• Fixed: Clicks on 'data-trigger-modal' elements don't fire if javascript is called in head
• Added user-configurable option for backdrop z-index value.

---

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