Minimalist jQuery Modal Popup Box Plugin - Simple Popup

File Size: 41.8 KB
Views Total: 21409
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist jQuery Modal Popup Box Plugin - Simple Popup

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

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.