jQuery Plugin To Create Multifunctional Floating Panels - jsPanel 4

jQuery Plugin To Create Multifunctional Floating Panels - jsPanel 4

jsPanel 4 is a jQuery plugin to create multifunctional, highly configurable, themeable, draggable and resizable floating panels (windows) on your web project. The plugin can be used as modal window, dialog box, tooltip and even as hint. 

As of version 4.0.0 jsPanel is written in plain JavaScript, all dependencies are removed.


  • jQuery
  • jQuery UI
  • Bootstrap (Required only when you intend to use option.bootstrap)
  • Font Awesome (required only when you intend to use the font-awesome iconfont)

Basic usage:

1. Include jQuery library and other required resources on your webpage.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/flick/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

2. Download and include the jQuery jsPanel plugin on the webpage. Make sure the jquery.jspanel.js is loaded after jQuery JavaScript library.

<link href="jspanel/jquery.jspanel.css" rel="stylesheet">
<script src="jspanel/jquery.jspanel.js"></script>

3. Create basic floating panel that appends to the body element.


4. Default plugin settings.

autoclose:          false,
border:             false,
callback:           false,
closeOnEscape:      false,
container:          'body',
content:            false,
contentAjax:        false,
contentIframe:      false,
contentOverflow:    'hidden',
contentSize:        {
  width:  400, /* do not replace with "400 200" */
  height: 200
custom:             false,
dblclicks:          false,
delayClose:         0,
draggable:          {
  handle:  'div.jsPanel-titlebar, div.jsPanel-ftr',
  opacity: 0.8
dragit:             {
  axis:        false,
  containment: false,
  grid:        false,
  handles:     '.jsPanel-titlebar, .jsPanel-ftr.active', // do not set .jsPanel-titlebar to .jsPanel-hdr
  opacity:     0.8,
  start:       false,
  drag:        false,
  stop:        false,
  disable:     false,
  disableui:   false
footerToolbar:      false,
headerControls:     {
  close:     false,
  maximize:  false,
  minimize:  false,
  normalize: false,
  smallify:  false,
  controls:  'all',
  iconfont:  'jsglyph'
headerLogo:         false,
headerRemove:       false,
headerTitle:        'jsPanel',
headerToolbar:      false,
id:                 () => `jsPanel-${jsPanel.id += 1}`,
maximizedMargin:    [5,5,5,5],
minimizeTo:         true,
onbeforeclose:      false,
onbeforemaximize:   false,
onbeforeminimize:   false,
onbeforenormalize:  false,
onbeforesmallify:   false,
onbeforeunsmallify: false,
onclosed:           false,
onmaximized:        false,
onminimized:        false,
onnormalized:       false,
onbeforeresize:     false,
onresized:          false,
onsmallified:       false,
onunsmallified:     false,
onfronted:          false,
onwindowresize:     false,
paneltype:          false,
position:           'center', // all other defaults are set in jsPanel.position()
resizable:          {
  handles:   'n, e, s, w, ne, se, sw, nw',
  autoHide:  false,
  minWidth:  40,
  minHeight: 40
resizeit:           {
  containment: false,
  grid:        false,
  handles:     'n, e, s, w, ne, se, sw, nw',
  minWidth:    40,
  minHeight:   40,
  maxWidth:    10000,
  maxHeight:   10000,
  start:       false,
  resize:      false,
  stop:        false,
  disable:     false,
  disableui:   false
rtl:                false,
setstatus:          false,
show:               false,
template:           false,
theme:              'default'

Change logs:

4.0.0-beta.5 (2018-04-19)

  • new events jspaneldragstart, jspaneldrag, jspaneldragstop, jspanelresizestart, jspanelresize, jspanelresizestop
  • new extension dock extending a jsPanel with the method .dock(). This method allows to dock one or more slave panels to a master panel. Basically that means a slave panel is dragged, maximized, normalized, minimized, closed and optionally resized together with the master panel it's docked to.
  • bugfix in option dragit
  • bugfix in extension layout
  • bugfix in jspanel.css
  • bugfix in CSS for Right-To-Left panels
  • removed CSS border-radius settings from themes

v3.11.1 (2017-11-22)

  • options dragit/resizeit on touch devices now work with touch AND mouse
  • the header logo now is also a default drag handle

v3.11.0 (2017-10-22)

  • option.position extended with parameters minLeft, maxLeft, minTop and maxTop
  • bugfix in options dragit and resizeit when panel content includes one or more iframes
  • various minor bugfixes

v3.10.0 (2017-08-19)

  • Added options dragit and resizeit callbacks start, drag/resize and stop receive second argument with position/size object
  • Added parameter disableOnMaximized for option.dragit
  • Improved compatibility of options dragit and resizeit on mobile devices

v3.9.3 (2017-07-17)

  • Fixed panel did not front on click in header section on some browsers

v3.9.2 (2017-06-28)

  • Fixed issue with option.dragit in combination with option.onwindowresize
  • Fixed issue with options dragit/resizeit (panel is now properly fronted when starting a drag or resize operstion or when clicking the header section)
  • Fixed issue in optio.resizeit (panel "glued" to mouse in some situations)
  • Fixed: When the content section of a jsPanel contains another document complete with DTD, HTML tag etc. the panel sometimes "glued" to the mousecursor after draging/resizing the panel with the built-in dragit/resizeit interactions

v3.9.0 (2017-06-17)

  • Fixed: When the content section of a jsPanel contains another document complete with DTD, HTML tag etc. the panel sometimes "glued" to the mousecursor after draging/resizing the panel with the built-in dragit/resizeit interactions

v3.9.0 (2017-05-29)

  • jsPanel script now works also after calling $.noConflict()
  • Added: new grid option for options dragit and resizeit
  • improved handling of options object passed to $.jsPanel()
  • minified js files created via butternut

v3.8.1 (2017-05-10)

  • Bugfix in option.dragit and option.resizeit when using option.position.of

v3.8.0 (2017-04-26)

  • Added: option.panelSize to set the dimensions of the complete panel (option.contentSize sets only the dimensions of the content section)
  • Added: method jsPanel.contextmenu(elmt, config) to easily use jsPanel as context menu
  • Added: methods .dragit() and .resizeit() to disable/reenable dragit/resizeit interactions of existing panels
  • Added: parameter 'disable' to options dragit and resizeit to create panels with the interactions dragit and/or resizeit initialized but disabled until reenabled again
  • Added: positioning can be completely turned off with setting option.position to a value evaluating to false
  • Added: parameters autoresize and autoposition to option.contentAjax
  • Fixed: option.maximizedMargin properties now accept 0 values when using an object
  • Improved support of mobile devices (especially Android) concerning the built-in draggable and resizable interactions (option.dragit and option.resizeit)
  • Improved support of option.contentSize.width/height set to "auto" when used together with option.contentAjax
  • Improvements in CSS and some internal methods

v3.7.0 (2017-03-02)

  • small adjustment of css colors when hovering controls of built-in themes
  • option.headerControls: added option to use custom iconset for the controls
  • css: added flexbox vendor prefixes
  • removed the polyfills

v3.6.1 (2017-02-08)

  • bugfix in internal function building header/footer toolbar when using a space seperated list of classnames to add

v3.6.0 (2017-02-03)

  • css various minor tweaks
  • js various minor tweaks
  • bugfix in internal functions responsible for applying a theme
  • bugfix in option.show
  • new option.closeOneEscape to enable closeOnEscape for individual panels instead of the global jsPanel.closeOnEscape

v3.5.0 (2016-12-08)

  • css fix affecting only childpanels (panels that are appended to content section of other panel)
  • css tweaks for minimized replacements, panels without header/footer section
  • css/js tweaks for header logos
  • option.template now works also within a predefined configuration used with option.config
  • option.maximizedMargin now also accepts a configuration passed as array
  • option.maximizedMargin array can be used to synchronize maximizedMargin, option.dragit.containment and option.resizeit.containment
  • new: option.position parameter false to skip positioning completely
  • jsPanel.closeOnEscape now also accepts a string "closeparent" to directly close a parentpanel

v3.4.1 (2016-11-04)

  • bugfix in option.border
  • new added parameter resize to method .resize() in order to allow passing values for content section size instead of panel size
  • a few internal code improvements

v3.4.0 (2016-10-28)

  • .setTheme() and option.theme can now be used with a value of none. Creates an all white panel without any theme related classes/styles applied
  • .setTheme() and option.theme added support for Material Design for Bootstrap themes
  • .close() added parameters skipOnbeforeClose and skipOnclosed
  • new option.minimizeTo allows to specify a container a minimized panel is appended to or prevents a minimized replacement from being created at all
  • new option.delayClose allows to set a delay when closing a panel (useful when you want apply an animation before the panel is actually removed)
  • new option.border now supports passing a border-color overriding the theme color which would otherwise be used as border-color
  • new: support for Material icons for the controls
  • various internal code changes and minor bugfixes

v3.3.1 (2016-09-17)

  • Bugfix: With version 3.3.0 some tooltip connectors had no background color depending on configuration
  • Code: In the js development file (jquery.jspanel.js) most occurrences of standard string concatenations are replaced with template literals

v3.3.0 (2016-09-12)

  • CSS for header section (including header toolbar) and footer toolbar is modified. In case you use header and/or footer toolbars you might have to change custom css you applied.
  • new option.headerLogo to add a logo to the top left corner of the panel

v3.2.0 (2016-08-26)

  • new option.onwindowresize allows to enable panel responsivenes to a window resize event
  • method .reposition() now supports repositioning of tooltips (including the connector)
  • a lot of internal code improvements

v3.1.1 (2016-07-25)

  • Bugfix: Controls did not work on some mobile browsers.

v3.1.0 (2016-07-13)

  • better support of using "auto" for width/height values
  • .resize() now optionally accepts a config object with the props: width, height, minwidth, maxwidth, minheight, maxheight and callback
  • calling .resize() without any argument is the same as calling .resize( config ) where all config parameters are set to their defaults

v3.0.1 (2016-06-25)

  • Method maximize(). Method can now be called even if a panel is already maximized. Better support in IE11 and EDGE
  • method close() improved
  • option.onmaximized callback removed from method smallify()
  • option.onnormalized callback removed from method smallify() and after a resize with mouse
  • bugfix for smallified panels that are resized only horizontally
  • bugfix for minimized panels in IE11
  • new properties of the global jsPanel object: jsPanel.isIE is true if browser is MS IE11; jsPanel.isEdge is true if browser is MS EDGE.

v3.0.0 (2016-06-13)

  • use of some ES2015/ES2016 features. The download package includes a JavaScript file transpiled to ES5 using Babel.
  • use of CSS flex for header and footer sections
  • completely new positioning function with other syntax
  • completely new event handling
  • no more support for IE <= 10

v2.6.1 (2016-01-24)

  • bugfix in option.position when using the number 0 as value for either left or top
  • new option.onbeforeclose takes a function to execute before the jsPanel closes. If function returns false panel will not close.
  • new option.onbeforemaximize takes a function to execute before the jsPanel maximizes. If function returns false panel will not maximize.
  • new option.onbeforeminimize takes a function to execute before the jsPanel minimizes. If function returns false panel will not minimize.
  • new option.onbeforenormalize takes a function to execute before the jsPanel normalizes. If function returns false panel will not normalize.
  • new option.onclosed takes a function to execute after the jsPanel closed.
  • new option.onmaximized takes a function to execute after the jsPanel maximized.
  • new option.onminimized takes a function to execute after the jsPanel minimized.
  • new option.onnormalized takes a function to execute after the jsPanel normalized.


  • v2.5.5: bugfix option.ajax (causing unnecesary get requests whenever a jsPanel is created)

About author:

Author: Flyer53

Homepage: http://jspanel.de/

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

  • Publication date: 19.04.2018
  • Source