Minimal jQuery Fading Modal Popup Plugin - Poppy

Poppy is an ultra-light jQuery plugin for creating responsive, nice clean modal popups with subtle fadeIn effects.

How to use it:

1. Create a button or link to open a modal window.

<button>Click Here for Pop-up</button>

2. Create the content for the modal window.

<div class="poppy" id="popup-content">

  Your content goes here

</div>

3. Add the following styles in your CSS file and change them to your taste.

.poppy {
  position: absolute;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
  padding: 5px 20px;
  border-radius: 3px;
  width: 50%;
}

.close-btn {
  height: 15px;
  width: 15px;
  border-radius: 15px;
  margin: 5px -10px;
  float: right;
  background-color: #BC5B46;
  content: "";
  cursor: pointer;
}

#poppyScreen {
  background-color: #000;
  position: absolute;
  z-index: 998;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  display: none;
}

4. Make sure to load the jQuery poppy plugin after loading jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="poppy.js"></script>

5. Initialize the plugin with one JS call. That's it.

$("button").poppy("popup-content");

---

This awesome jQuery plugin is developed by PeterGrillot. For more Advanced Usages, please check the demo page or visit the official website.