Customizable & Lightweight jQuery Popup Window Plugin - JeeGooPopup

Customizable & Lightweight jQuery Popup Window Plugin - JeeGooPopup
File Size: 326KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

JeeGooPopup is a fast and customizable jQuery plugin for creating a draggable, resizable, and closeable lightbox-like popup modal window on your website.

Basic Usage:

1. Include the basic CSS file and a skin CSS file on the web page.

<link href="jeegoopopup/skins/basic/style.css" rel="Stylesheet" type="text/css" />
<link href="jeegoopopup/skins/black/style.css" rel="Stylesheet" type="text/css" />

2. Create a button to toggle the popup window.

<input id="demo" type="button" value="Toggle Popup" />

3. Include the latest jQuery javascript library and jQuery JeeGooPopup plugin on the page.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jeegoopopup/jquery.jeegoopopup.1.0.0.js"></script>

4. Create a simple popup with custom title and html content.

<script type="text/javascript">
$(function() {
$('#demo').click(function(){
var options = {
title: 'The title',
html: 'Html Content'
};
$.jeegoopopup.open(options);
});
});
</script>

5. Configurations

title: 'The title', //  the title of the popup
html: 'Html Content', // the content of the popup
url: 'iframe.html', // popups an external html file instead of using html option.
width: 'auto',
height: 'auto',
scrolling: 'auto',
skinClass: 'jg_popup_basic', // the class name of the skin
fixed: true, // fixed position
center: true, // center the popup window
overlay: true, // display the overlay
overlayColor: '#000',
opacity: 50,
loaderVerticalOffset: 0, 
parentScrolling: true,
draggable: true,
resizable: true

6. Callbacks.

onOpen: function ()
onClose: function ()
onDragStart: function ()
onDrag: function ()
onDragEnd: function ()
onResizeStart: function ()
onResize: function ()
onResizeEnd: function ()

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