This time I will share jQuery Plugin and tutorial about jQuery Popup Window Plugin with CSS3 Flipping Animation – Flip Popup, hope it will help you in programming stack.
Flip Popup is a tiny, simple jQuery plugin used to pop up a modal window with a cool CSS3 flip animation. Fully customizable via CSS and JS options.
How to use it:
1. Load the necessary jQuery javascript library and the jQuery flip popup‘s Javascript and CSS in the document.
1 |
<link rel="stylesheet" href="flippopup.css"> |
2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
3 |
<script src="jquery.flippopup.js"></script> |
2. Create a link to open a popup window.
1 |
<div class="demo">click to popup</div> |
3. Create the content for the popup window.
4. The Javascript.
02 |
$( document ).ready(function(){ |
03 |
$( "#pop-demo" ).hide(); |
05 |
$( ".demo" ).click(function() { |
06 |
$( "#pop-demo" ).flipOrizzontal({ |
09 |
lightboxcolor:"#ff5599", |
10 |
backgroundcolor:"#ff5599", |
13 |
shadowcolor:"#ff5599", |
14 |
shadowsize:"0px 0px 25px 5px", |
5. All the default settings.
03 |
lightboxcolor:"#ff5599", |
04 |
backgroundcolor:"#ff5599", |
07 |
shadowcolor:"#ff5599", |
08 |
shadowsize:"0px 0px 25px 5px", |
16 |
iframescrolling:"auto" |
Change log:
2015-11-08
This awesome jQuery plugin is developed by zerokod. For more Advanced Usages, please check the demo page or visit the official website.
