Tiny Customizable Modal Popup Plugin For jQuery - PIGNOSE Popup

PIGNOSE Popup is a lightweight yet customizable jQuery modal plugin which helps you create a popup window with a fullscreen background overlay from any html elements.

How to use it:

1. Be sure to include the PIGNOSE Popup plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/pignose.popup.js"></script>

2. Add the modal title, content and a close button to the modal.

<div id="popup">
  <div class="item_header">
    <span class="txt_title">Modal Title</span>
    <a href="#" class="btn_close">
      <img src="icon_close.gif" alt="Close">
    </a>
  </div>
  <div class="item_content">
    Modal Content
  </div>
</div>

3. Style the modal popup whatever you like.

#popup {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  background-color: #ffffff;
  border: 1px solid #cf6060;
  border-radius: 5px;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

#popup .item_header {
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  background-color: #cf6060;
  color: #ffffff;
  border-bottom: 1px solid #d8d8d8;
  overflow: hidden;
}

#popup .item_header .txt_title { float: left; }

#popup .item_header .btn_close {
  float: right;
  margin-top: 2px;
}

#popup .item_content {
  padding: 60px 20px;
  font-family: 'Raleway', 'sans-serif';
  font-size: 16px;
  color: #555555;
  text-align: center;
}

4. Display the modal popup on document ready.

$('#popup').pignosePopup();

5. Available options which can be passed into the plugin during initialization.

$('#popup').pignosePopup({

  // enable animation
  animate:   true,

  // theme
  theme: '',

  // CSS class for close button
  btn_close: '.btn_close',

  // ESC key to close the modal
  escape:    true,

  // transition delay
  time:      300,

  // background color of modal background
  tint:      '#000000',

  // opacity of modal background
  opacity:   0.6,

  // enable / disbale page scroll
  scroll:    false,

  // CSS z-index
  zIndex:    500,
  
});

Change log:

2015-10-15

• Update new version 1.0.1, added colours.

2015-10-14

• small changes
• renamed to flat modal

---

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