Super Simple jQuery Modal Plugin - Basic Modal
File Size: | 101KB |
---|---|
Views Total: | 1793 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.