Minimalist jQuery Modal Popup Box Plugin - Simple Popup
File Size: | 41.8 KB |
---|---|
Views Total: | 21446 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Simple Popup is a dead-simple jQuery modal plugin that popups a closable modal box with full-screen overlay and a smooth sliding animation effect.
Basic Usage:
1. Include the latest jQuery javascript library on your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2. Include jQuery simple popup plugin files on the web page.
<link rel="stylesheet" href="css/jquery.popup.css" type="text/css"> <script type="text/javascript" src="js/jquery.popup.js"></script>
3. Create the Html for fullscreen overlay.
<div class="p_body js__p_body js__fadeout"></div>
4. Create the Html for the modal box.
<div class="popup js__popup js__slide_top"> <a href="#" class="p_close js__p_close" title="Close"> <span></span><span></span> </a> <div class="p_content">jQuery Plugins</div> </div>
5. Add a link to open the modal box.
<a href="#" class="js__p_start">Dmo1</a>
6. Initialize the plugin.
<script type="text/javascript"> $(function() { $(".js__p_start").simplePopup(); }); </script>
Change log:
2015-10-28
- update.
v1.1.14 (2014-04-28)
- some class in handler element fix
This awesome jQuery plugin is developed by jumanji27. For more Advanced Usages, please check the demo page or visit the official website.