Highly Customizable jQuery Popup Window Plugin - popupWindow.js
File Size: | 18.8 KB |
---|---|
Views Total: | 6956 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
popupWindow.js is a powerful jQuery popup window plugin which allows you create fully configurable popups, dialogs and modals with drag'n'drop, resize, maximize and minimize capabilities.
How to use it:
1. To get started, you have to load jQuery library and the jQuery popupWindow plugin's files in the html page.
<link href="src/popupwindow.css" rel="stylesheet"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="src/popupwindow.js"></script>
2. Add custom html content to the popup window.
<div id="basic-demo" class="example_content">I'm a Basic PopupWindow!</div>
3. Hide the html content on page load.
.example_content { display : none; }
4. Initialize the popup window.
$("#basic-demo").PopupWindow({ // options here });
5. Show the popup window.
$("#basic-demo").PopupWindow("open");
6. Full configuration options with default values.
$("#basic-demo").PopupWindow({ // popup title title : "Popup Window", // modal mode modal : true, // auto open on page load autoOpen : true, // anmation speed animationTime : 300, // custom css classes customClass : "", // custom action buttons buttons : { close : true, maximize : true, collapse : true, minimize : true }, // button's position buttonsPosition : "right", // custom button text buttonsTexts : { close : "Close", maximize : "Maximize", unmaximize : "Restore", minimize : "Minimize", unminimize : "Show", collapse : "Collapse", uncollapse : "Expand" }, // draggable options draggable : true, nativeDrag : true, dragOpacity : 0.6, // resizable options resizable : true, resizeOpacity : 0.6, // enable status bar statusBar : true, // top position top : "auto", // left position left : "auto", // height / width height : 200, width : 400, maxHeight : undefined, maxWidth : undefined, minHeight : 100, minWidth : 200, collapsedWidth : undefined, // always keep in viewport keepInViewport : true, // enable mouseh move events mouseMoveEvents : true });
7. API methods.
// open $('#selector').PopupWindow("open") // close $('#selector').PopupWindow("close") // maximize $('#selector').PopupWindow("maximize") // unmaximize $('#selector').PopupWindow("unmaximize") // minimize $('#selector').PopupWindow("minimize") // unminimize $('#selector').PopupWindow("unminimize") // collapse $('#selector').PopupWindow("collapse") // uncollapse $('#selector').PopupWindow("uncollapse") // get the current position of the firset popup window // return an object with numeric top and left values. $('#selector').PopupWindow("getposition") // set the poisition $('#selector').PopupWindow("setposition", position) // get the current size of the firset popup window // return an object with numeric width and height values. $('#selector').PopupWindow("getsize") // set the size $('#selector').PopupWindow("setsize", size) // get the current state of the firset popup window // return a string representing the state: normal, closed, collapsed, minimized or maximized $('#selector').PopupWindow("getstate") // set the state $('#selector').PopupWindow("setstate", state) // set the title $('#selector').PopupWindow("settitle", title) // set the content in the status bar $('#selector').PopupWindow("statusbar", content) // destroy the plugin $('#selector').PopupWindow("destroy")
8. Events.
// Fired when opened. $(selector).on("open.popupwindow", handler) // Fired when closed. $(selector).on("close.popupwindow", handler) // Fired when collapsed $(selector).on("collapse.popupwindow", handler) // Fired when uncollapsed $(selector).on("uncollapse.popupwindow", handler) // Fired when minimized $(selector).on("minimize.popupwindow", handler) // Fired when unminimized. $(selector).on("unminimize.popupwindow", handler) // Fired when maximized. $(selector).on("maximize.popupwindow", handler) // Fired when unmaximized. $(selector).on("unmaximize.popupwindow", handler) // Fired when moved. // Additional parameter position is passed to the handler function. $(selector).on("move.popupwindow", handler) // Fired when resized. // Additional parameter position is passed to the handler function. $(selector).on("resize.popupwindow", handler) // Fired when destroyed. $(selector).on("destroy.popupwindow", handler)
Changelog:
2019-10-02
- Version 1.1.0: Added an option to use Native Drag API
2016-08-14
- Version 1.0.3: Fixed a bug in the CSS settings
2016-08-05
- Version 1.0.2: Some warnings are thrown when PopupWindow’s actions are called on an element where PopupWindow has not been initialized yet.
2016-07-29
- Version 1.0.1: CSS tweak.
This awesome jQuery plugin is developed by gasparesganga. For more Advanced Usages, please check the demo page or visit the official website.