Minimal jQuery Fading Modal Popup Plugin - Poppy

File Size: 9.94 KB
Views Total: 2924
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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


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="//"></script>
<script src="poppy.js"></script>

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


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