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

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

By Posted on

This time I will share jQuery Plugin and tutorial about Simple Fast Popup Window Plugin For jQuery – simple-popup.js, hope it will help you in programming stack.

Simple Fast Popup Window Plugin For jQuery simple popup js - Download Simple Fast Popup Window Plugin For jQuery - simple-popup.js
File Size: 12.3 KB
Views Total: 13430
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <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.

view source
1 <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.

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

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

view source
1 <a class="demo-1"
2    data-content="Inline Content Here">
3      Lanuch
4 </a>
view source
1 $("a.demo-1").simplePopup();

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

view source
1 <a class="demo-2">
2   Lanuch
3 </a>
4 <div id="myPopup">
5   My popup content here
6 </div>
view source
1 #myPopup { display:none; }
view source
1 $("a.demo-2").simplePopup({
2   type: "html",
3   htmlSelector: "#myPopup"
4 });

6. All default configuration options for the plugin.

view source
01 $(".selector").simplePopup({
02  
03   // "auto", "data", "html"
04   type: "auto",
05  
06   // HTML selector for popup content
07   htmlSelector: null,    
08  
09   // Width/Height of popip       
10   width: "600px",
11   height: "auto",
12  
13   // Background color
14   background: "#fff",
15  
16   // Backdrop opactity
17   backdrop: 0.7, 
18  
19   // Backdrop background (any css here)
20   backdropBackground: "#000",    
21  
22   // Inject CSS via JS
23   inlineCss: true,          
24  
25   // Close popup when "escape" is pressed    
26   escapeKey: true,               
27  
28   // Display a closing cross
29   closeCross: true,              
30  
31   // The time to fade the popup in, in seconds
32   fadeInDuration: 0.3,           
33  
34   // The timing function used to fade the popup in
35   fadeInTimingFunction: "ease",  
36  
37   // The time to fade the popup out, in seconds
38   fadeOutDuration: 0.3,          
39  
40   // The timing function used to fade the popup out
41   fadeOutimingFunction: "ease",  
42  
43   // Callbacks
44   beforeOpen: function(){},
45   afterOpen: function(){},
46   beforeClose: function(){},
47   afterClose: function(){}
48    
49 });

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

source : jqueryscript.net

Related posts: