Awesome Open Source
Awesome Open Source

NPM license npm version npm downloads

jsPanel 4.12.0 released 2021-07-09

As of v4.11.0-beta methods jsPanel.ajax() and jsPanel.fetch() are updated. That also affects options contentAjax and contentFetch. These updates might break existing code. So please check the docs for this beta release on

A dependency free javascript tool to create highly configurable multifunctional floating panels.

jsPanels can be used as floating, draggable and resizable panels, modals, tooltips, hints/alerts/notifiers or contextmenus.

jsPanel 4 homepage:


Just a modern mobile or desktop browser like FF, Chrome, EDGE, Brave, Opera, Vivaldi. jsPanel 4 is pure javascript and does not depend on any other library.

Include the files

The following example shows a complete html file with the minimium setup:

<!DOCTYPE html>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jsPanel 4</title>
        <!-- loading jsPanel css -->
        <link rel="stylesheet" href="dist/jspanel.css">

        <!-- Your HTML goes here -->

        <!-- loading jsPanel javascript -->
        <script src="dist/jspanel.js"></script>
        <!-- optionally load jsPanel extensions -->
        <script src="dist/extensions/modal/jspanel.modal.js"></script>
        // and the other extension you need

And then ...

After including all the necessary files in your project you can create a jsPanel like ...

jsPanel.create( options );

// or
var myPanel = jsPanel.create( options );

... where options is an object passing the jsPanel configuration options to the function.

    position:    "left-top",
    contentSize: "600 350",
    contentAjax: {
    	url:  '../path/to/the/resource',
        done: function(xhr, panel) {
        	// the keyword "this" inside the function refers to the XMLHttpRequest object
        fail: function(xhr, panel) {
        	//the keyword "this" inside the function refers to the XMLHttpRequest object
    headerTitle: "my example jsPanel",
    theme:       "rebeccapurple",
    callback:    function(panel) {
    	// do whatever you like
        // the keyword "this" inside the callback function refers to the panel

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,551,389
Ui (5,265
Alert (852
Modal (631
Panel (345
Tooltip (335
Notifier (243
Draggable (241
Related Projects