Highly Configurable Floating Panels, Modals, Tooltips | jsPanel

Key Features:

• Supports any HTML content.
• AJAX and iframe content are also supported.
• Header and Footer Toolbar controls.
• Built-in, draggable and resizable interactions.Basic utilization (v3):

Must Read: Lightbox Gallery Component Written in Vanilla JS | ensemble.Lightbox.js

How to make use of it:

1. Include the jsPanel plugin and different required sources on the webpage.

<!-- Required -->
<link rel="stylesheet" href="/path/to/source/jquery.jspanel.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/source/jquery.jspanel-compiled.js"></script>

<!-- OPTIONAL -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Create a floating panel that appends to the body.

$.jsPanel();

3. Override the default option to create your individual floating panels on the web page.

$.jsPanel({

  // auto closes the panel after a timeout
  // sets a timeout here
  autoclose: false,

  // shows borders around the panel
  border: false,

  callback: false,

  // closes the panel by pressing ESC key
  closeOnEscape: false,

  // contaner element to hold the panel
  container: 'body',

  // any panel content here:
  // DOM element
  // array of elements
  // HTML string
  // jQuery object
  // function that returns an HTML string, DOM element(s) or jQuery object 
  content: false,

  /* loads content via ajax:
     contentAjax: {
       url:            'url/to/load',
       autoload:       true,
       autoresize:     true,
       autoreposition: true
     }
  */
  contentAjax: false,

  /*loads iframe content to the panel
    contentIframe: {
      width:  1200,
      height: 950,
      src:    'iframe.html',
      id: 'myID',
      classname: 'myClass',
      name:   'myFrame',
      style:  {'border': '10px solid #000'}
    }
  */
  contentIframe: false,

  // CSS overflow property
  contentOverflow: 'hidden',

  // content size
  contentSize: {
    width: 400,
    /* do not replace with "400 200" */
    height: 200
  },

  // allows to set double-click handlers for header, content and footer
  dblclicks: false,

  // time to wait before closing the panel
  delayClose: 0,

  // jQuery UI draggable configs
  draggable: {
    handle: 'div.jsPanel-headerlogo, div.jsPanel-titlebar, div.jsPanel-ftr',
    opacity: 0.8
  },

  // built-in draggable configs
  dragit: {
    axis: false,
    containment: false,    
    handles: '.jsPanel-headerlogo, .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
  },

  // jQuery UI resizable configs
  resizable: {
    handles: 'n, e, s, w, ne, se, sw, nw',
    autoHide: false,
    minWidth: 40,
    minHeight: 40
  },

  // built-in draggable configs
  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
  },

  // shows footer toolbar
  footerToolbar: false,

  // shows header controls
  headerControls: {
    close: false,
    maximize: false,
    minimize: false,
    normalize: false,
    smallify: false,
    controls: 'all',
    iconfont: 'jsglyph'
  },

  // shows header logo
  headerLogo: false,

  // allows to remove the panel header
  headerRemove: false,

  // header title
  headerTitle: 'jsPanel',

  // shows header toolbar
  headerToolbar: false,

  // unique ID
  id: function id() {
    return "jsPanel-".concat(jsPanel.id += 1);
  },

  // margins to maintain when maximized
  maximizedMargin: [5, 5, 5, 5],

  // change the default minimize behavior
  minimizeTo: true,

  // panel size
  panelSize: { width: 430, height: 270 }

  // 'modal', 'hint', 'tooltip'
  paneltype: false,

  // panel position
  /*{
      my: 'center',
      at: 'center',
      of: 'window',
      minLeft: undefined,
      minTop: undefined,
      maxLeft: undefined,
      maxTop: undefined,
      offsetX: 0,
      offsetY: 0,
      modify: false,
      fixed: 'true',
      autoposition: false
    }
  position: 'center',

  // RTL mode
  rtl: false,

  // sets the panel to maximized, minimized after panel was created
  setstatus: false,

  // applies an animation to the panel when inserted into the document
  show: false,

  // your own template here
  template: false,

  // built-in themes: 'default', 'primary', 'info', 'success', 'warning' or 'danger'
  // Bootstrap themes: "bootstrap-default", "bootstrap-primary", "bootstrap-info", "bootstrap-success", "bootstrap-warning" and "bootstrap-danger"
  // or any colors
  theme: 'default'
  
});

4. Callback features.

$.jsPanel({

  // a function or an array of functions
  // fired after the jsPanel was inserted into the document.
  callback: false,

  // fired before the jsPanel is closed
  onbeforeclose: function (panel) {
    // do something
  },

  // fired before the jsPanel is maximized
  onbeforemaximize: function (panel) {
    // do something
  },

  // fired before the jsPanel is minimized
  onbeforeminimize: function (panel) {
    // do something
  },

  // fired before the jsPanel is restored
  onbeforenormalize: function (panel) {
    // do something
  },

  // fired before the jsPanel is smallified/unsmallified
  onbeforesmallify: function (panel) {
    // do something
  },
  onbeforeunsmallify: function (panel) {
    // do something
  },

  // fired before the jsPanel is resized
  onbeforeresize: function (panel) {
    // do something
  },

  // fired after the jsPanel is closed
  onclosed: function (panel) {
    // do something
  },

  // fired after the jsPanel is maximized
  onmaximized: function (panel) {
    // do something
  },

  // fired after the jsPanel is minimized
  onminimized: function (panel) {
    // do something
  },

  // fired after the jsPanel is restored
  onnormalized: function (panel) {
    // do something
  },
  
  // fired after the jsPanel is resized
  onresized: function (panel) {
    // do something
  },

  // fired after the jsPanel is smallified/unsmallified
  onsmallified: function (panel) {
    // do something
  },
  onunsmallified: function (panel) {
    // do something
  },

  // fired on window resize
  onwindowresize: false

});

5. API strategies.

// close the panel
instance.close();

// close all child panels
instance.closeChildpanels();  

// reload content
instance.contentReload(callback);

// resize content
instance.contentResize(callback);

// enable/disable dragit interaction
instance.dragit();

// bring the panel to the front
instance.front(callback);

// show/hide header controls
instance.headerControl(control [, action]);

// set/get header title
instance.headerTitle(title); 

// maximize the panel
instance.maximize(callback);  

// minimize the panel
instance.minimize(callback)  

// restore the panel
instance.normalize(callback);

// re-position the panel
instance.reposition(position, callback);  

// resize the panel
instance.resize(width, height [, callback]);

// enable/disable resizeit interaction
instance.resizeit();

// change the theme
instance.setTheme(theme, callback);  

// smallify the panel
instance.smallify(callback);

// add tootlbar
instance.toolbarAdd(location, toolbar [, callback]);

See Demo And Download