jQuery Popup Window Plugin with CSS3 Flipping Animation - Flip Popup

File Size: 84.8 KB
Views Total: 12696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Popup Window Plugin with CSS3 Flipping Animation - Flip Popup

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.

<link rel="stylesheet" href="flippopup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.flippopup.js"></script>

2. Create a link to open a popup window.

<div class="demo">click to popup</div>

3. Create the content for the popup window.

<div id="pop-demo">
Your content goes here
</div>

4. The Javascript.

<script>
$( document ).ready(function(){
$( "#pop-demo" ).hide();

$( ".demo" ).click(function() {
$( "#pop-demo" ).flipOrizzontal({
color: "#fff",
xcolor:"#ff5599",
lightboxcolor:"#ff5599",
backgroundcolor:"#ff5599",
border_radius:"25px",
speed:"0.5",
shadowcolor:"#ff5599",
shadowsize:"0px 0px 25px 5px",
font_family:"arial",
popupwidth:"600px",
popupheight:"400px"
});

});
</script>

5. All the default settings.

color: "#fff",
xcolor:"#ff5599",
lightboxcolor:"#ff5599",
backgroundcolor:"#ff5599",
border_radius:"25px",
speed:"0.5",
shadowcolor:"#ff5599",
shadowsize:"0px 0px 25px 5px",
font_family:"arial",
popupwidth:"600px",
popupheight:"400px",
datatosendtoajax:"",
loadurl:"",
imageurl:"",
iframeurl:"",
iframescrolling:"auto"

Change log:

2015-11-08

  • v2.0.1

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