jQuery Popup Window Plugin with CSS3 Flipping Animation - Flip Popup
File Size: | 84.8 KB |
---|---|
Views Total: | 12710 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.