Draggable/Resizable/Maximizable/Minimizable Dialog Window Library – winbox

Preview:

Description:

winbox is an open-source, zero-dependency JavaScript library for creating draggable, resizable, maximizable, and minimizable dialog windows on the app.

More Features:

• 2 pre-built themes: Light and Modern.
• Highly customizable.
• Allows to expand the window to fullscreen.
• Allows to minimize the modal into a tab dock.
• Supports any content: inline, iframe, HTML.

How to use it:

1. Import the winbox’s JavaScript and CSS into the document.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="dist/css/winbox.min.css">
<!-- Themes -->
<link rel="stylesheet" href="dist/css/themes/modern.min.css">
<link rel="stylesheet" href="dist/css/themes/white.min.css">
<!-- Core JavaScript -->
<script src="dist/js/winbox.min.js"></script>

<!-- OR ... -->
<script src="dist/winbox.bundle.js"></script>

2. Create a default dialog window and specify the title & message as follows:

new WinBox("Default Dialog", {
    title: "Default Dialog",
    html: "<h1>HTML Content</h1>"
});

3. Or load content from an element within the document.

<div id="backstore" style="display: none">
  <div id="content">
    Dialog Content Here
  </div>
</div>

new WinBox("Mount Example", {
    mount: document.getElementById("content").cloneNode(true)
});

4. Or load external content in an iframe.

new WinBox("Iframe Example", {
    url: "/path/to/page/"
});

5. Specify the theme of the dialog window.

new WinBox("Iframe Example", {
    class: "modern", // 'white', or 'customTheme'
});

6. More options to customize the dialog window.

new WinBox("With Options", {
    // unique ID
    id: "my-window",
    // root element
    root: document.body,
    // modal mode
    modal: false,
    // background color
    background: "#fff",
    // border width
    border: 4,
    // width/height
    width: 200,
    height: 200,
    // x/y position
    x: "center",
    y: "center",
    // maximize the dialog on init
    max: false,
    // position options
    top: 50,
    right: 50,
    bottom: 0,
    left: 50,
});

7. Callback functions.

new WinBox("With Options", {
    onfocus: function(){
      // do something
    },
    onblur: function(){
      // do something
    },
    onresize: function(width, height){
      // do something
    },
    onmove: function(x, y){
      // do something
    },
    onclose: function(){
      // do something
    }
});

8. API methods & properties.

const myBox = WinBox(title, options);

// methods
myBox.mount(src)
myBox.unmount(dest)
myBox.move(x, y)
myBox.resize(width, height)
myBox.close()
myBox.focus()
myBox.hide()
myBox.show()
myBox.minimize(state)
myBox.maximize(state)
myBox.fullscreen(state)
myBox.setBackground(string)
myBox.setTitle(string)
myBox.setUrl(string)
myBox.addClass(name)
myBox.removeClass(name)

// properties
myBox.id
myBox.body
myBox.min
myBox.max
myBox.x
myBox.y
myBox.width
myBox.height
myBox.top
myBox.right
myBox.bottom
myBox.left

Changelog:

v0.1.91 (05/08/2021)

• fix lost pointer when hovering iframe