jQuery Plugin For Popup Windows In A Specific Area - Area Popup

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.