Simple Fast Popup Window Plugin For jQuery - simple-popup.js

simple-popup.js is a simple, fast jQuery popup plugin which lets you create highly customizable modal pop boxes with configurable fade in/out effects.

Basic usage:

1. Include the core style sheet file jquery.simple-popup.min.css in the header of the webpage.

<link href="jquery.simple-popup.min.css" rel="stylesheet">

2. When you don't like inline CSS in your HTML, include this file and change all css rules to your liking. This file is used when the option "inlineCss: false" is provided in the simplePopup function.

<link href="jquery.simple-popup.settings.css" rel="stylesheet">

3. Include jQuery library and the core JavaScript file jquery.simple-popup.min.js right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.simple-popup.min.js"></script>

4. Create a trigger link to toggle a modal popup with inline content.

<a class="demo-1" 
   data-content="Inline Content Here">
     Lanuch
</a>

$("a.demo-1").simplePopup();

5. Create a trigger link to toggle a modal popup that loads content from a specific HTML block.

<a class="demo-2">
  Lanuch
</a>
<div id="myPopup">
  My popup content here
</div>

#myPopup { display:none; }

$("a.demo-2").simplePopup({ 
  type: "html", 
  htmlSelector: "#myPopup" 
});

6. All default configuration options for the plugin.

$(".selector").simplePopup({ 

  // "auto", "data", "html"
  type: "auto",

  // HTML selector for popup content
  htmlSelector: null,     

  // Width/Height of popip        
  width: "600px",
  height: "auto",

  // Background color
  background: "#fff",

  // Backdrop opactity
  backdrop: 0.7,  

  // Backdrop background (any css here)
  backdropBackground: "#000",     

  // Inject CSS via JS
  inlineCss: true,           

  // Close popup when "escape" is pressed     
  escapeKey: true,                

  // Display a closing cross
  closeCross: true,               

  // The time to fade the popup in, in seconds
  fadeInDuration: 0.3,            

  // The timing function used to fade the popup in
  fadeInTimingFunction: "ease",   

  // The time to fade the popup out, in seconds
  fadeOutDuration: 0.3,           

  // The timing function used to fade the popup out
  fadeOutimingFunction: "ease",   

  // Callbacks
  beforeOpen: function(){},
  afterOpen: function(){},
  beforeClose: function(){},
  afterClose: function(){}
  
});

---

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