Highly Customizable jQuery Popup Window Plugin - popupWindow.js

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.