jQuery Plugin For Popup Windows In A Specific Area - Area Popup
File Size: | 5.6 KB |
---|---|
Views Total: | 1912 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Area Popup is a small jQuery plugin that that allows you to popup a modal window that is always positioned in the middle of its parent container.
How to use it:
1. Create the modal content in a parent element.
<div class="ap_parent"> <div id="ap_popup-demo" class="ap_popup"> <p>Modal content</p> <p><a href="javascript:void(0)" class="ap_close">close</a></p> </div> </div>
2. Create a button to open the modal window.
<a href="#ap_popup-demo" class="ap_btn">Click me</a>
3. The core CSS styles.
.ap_parent { position: relative; } .ap_baseLayer { display: none; position: absolute; z-index: 98; opacity: 0; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: rgba(0,0,0,0.3); } .ap_popup { position: absolute; z-index: 99; visibility: hidden; opacity: 0; }
4. Add your own styles to the modal window.
.ap_parent { width: 300px; height: 300px; padding: 10px; box-sizing: border-box; background-color: #fafad2; } .ap_popup { width: 200px; padding: 10px; box-sizing: border-box; background-color: #fff; border-radius: 5px; box-shadow: 1px 1px 2px #ccc; } .ap_btn { display: inline-block; padding: 5px; background-color: #ff6347; color: #fff; text-align: center; text-decoration: none; }
5. Include the necessary jQuery library in the document and initialize the plugin with one JS call.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script > $(".ap_btn").areapopup(); </script>
This awesome jQuery plugin is developed by kokoe. For more Advanced Usages, please check the demo page or visit the official website.