Customizable & Lightweight jQuery Popup Window Plugin - JeeGooPopup
| File Size: | 326KB |
|---|---|
| Views Total: | 7964 |
| 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.











