Easy Modal Popup Plugin with jQuery and Bootstrap Styles - popItUp

popItUp is a lightweight jQuery plugin that uses Bootstrap styles to create fully customizable, ajax-enabled, modal-style popup windows with some cool jQuery animation effects. It follows viewport center when page scrolls and loads the external file using ajax. You can make popup fixed at screen or can change position by specifying offset values or you can do a lots of stuffs with it.

How to use it:

1. Load the required jQuery library and Bootstrap's stylesheet in the html page.

<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>

2. Load the jquery.popitup.js script after jQuery library but before the closing body tag.

<script src="jquery.popitup.js"></script>

3. The Html structure for the modal.

<div class="popit-wrapper example">
  <div class="popit-content">
    <div class="popit-header">
      <button type="button" class="popitup-close close">
        <span class="glyphicon glyphicon-remove-circle"></span>
      </button>
      <h4 class="popit-title">Modal title</h4>
    </div>
    <div class="popit-body">
      <p>Modal Content</p>
      <div class="content-wrapper"></div>
    </div>
    <div class="popit-footer">
      <button type="button" class="btn btn-default popitup-close">Close</button>
      <button type="button" class="btn btn-primary">Okey</button>
    </div>
  </div>
</div>

4. Hide the modal on page load.

.example { display:none }

5. Popup the modal in your screen.

$('.example').popitup();

6. Customize the modal popup with the following options.

$('.example').popitup({

  // the width of your mobile popup
  widthSet       :  "", 

  // the color of the overlay
  overlayColor   :  "#000", 

  // the opacity of the overlay
  // values between 0.1 to 1
  overlayOpacity :  "0.5",

  // close the popup when click anywhere on overlay outside the popup
  autoClose      :  false, 

  // accept: slideDown, slideUp, slideLeft, slideRight
  animation      :  null, 

  // the text or background color of popup
  colorChange    :  { 
    color      : null,
    background : null
  },

  // Popup will chase the center of the viewport when page scrolls.
  chase          :  true, 

  // the speed of chasing
  chaseSpeed     :  "500",

  // Set the popup fixed at center.
  fixedModal     :  false, 

  // Set the position of popup in a screen by specifying X and Y axis values. 
  modalPosition  :  [], 

  // Specify the class name of your container in which the content will be loaded after ajax call.
  containerToLoad:  "", 

  // Make an ajax call to your specified url and load the content. 
  // Note :- You have to specify the container(using containerToLoad option) in which the content to be loaded.
  urlToLoad      :  "", 
  imageToLoad    :  "", 

  // callback methods
  onCloseModal   :  function(){},            
  onOpenModal    :  function(){}

});

---

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