WinBox.js: HTML5 Window Manager for the Web.

WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!


Show Example




Load Library (Bundle)

<head>
    <script src="dist/winbox.bundle.js"></script>
</head>

Load Library (Non-Bundle)

<head>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
    <script src="dist/js/winbox.min.js"></script>
</head>


Class Constructor

WinBox(title, options<key: value>)



You can open the browser dev tools and copy and paste the js-code blocks into the console and play with them.


Basic Window

new WinBox("Basic Window");
Run Code




Custom Root

new WinBox("Custom Root", {

    root: document.body
});
Run Code




Custom Border

new WinBox("Custom Border", {

    border: "0.3em"
});
Run Code




Custom Color

new WinBox({

    title: "Custom Color",
    background: "#ff005d",
    border: 4
});
Run Code




Limit Viewport

new WinBox("Limit Viewport", {

    top: 50,
    right: 50,
    bottom: 0,
    left: 50
});
Run Code




Splitscreen

new WinBox("Splitscreen (Left)", {

    right: "50%",
    max: true
});

new WinBox("Splitscreen (Right)", {

    x: "100%",
    left: "50%",
    max: true
});
Run Code




Custom Position / Size

new WinBox({

    title: "Custom Position / Size",
    x: "center",
    y: "center",
    width: "50%",
    height: "50%"
});
Run Code




Modal Window

new WinBox("Modal Window", {

    modal: true
});
Run Code




Set innerHTML

new WinBox({

    title: "Set innerHTML",
    html: "<h1>Lorem Ipsum</h1>"
});
Run Code




Mount DOM (Cloned)

<div id="backstore" style="display: none">
    <div id="content">
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum [...]</p>
        <p>Duis autem vel [...]</p>
        <p>Ut wisi enim [...]</p>
    </div>
</div>
new WinBox("Mount DOM", {

    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code




Mount DOM (Singleton) + Auto-Unmount

new WinBox("Mount DOM", {

    mount: document.getElementById("content")
});
Run Code




Open URI / URL

new WinBox("WinBox.js", {

    url: "https://nextapps-de.github.io/winbox/"
});
Run Code




All Options

new WinBox({

    id: "my-window",
    class: ["no-full", "my-theme"],
    root: document.body,
    title: "All Options",
    background: "#fff",
    border: 4,
    width: 200,
    height: 200,
    x: "center",
    y: "center",
    max: false,
    splitscreen: true,
    top: 50,
    right: 50,
    bottom: 0,
    left: 50,
    html: "width: 200, height: 200",
    onfocus: function(){
        this.setBackground("#fff");
    },
    onblur: function(){
        this.setBackground("#999");
    },
    onresize: function(width, height){
        this.body.textContent = (
            "width: " + width + ", " +
            "height: " + height
        );
    },
    onmove: function(x, y){
        this.body.textContent = (
            "x: " + x + ", " +
            "y: " + y
        );
    },
    onclose: function(force){
        return !confirm("Close window?");
    }
});
Run Code




Control Programmatically

<div id="controls">
    <button onclick="buttons.minimize()">Minimize (Toggle)</button>
    <button onclick="buttons.maximize()">Maximize (Toggle)</button>
    <button onclick="buttons.fullscreen()">Fullscreen (Toggle)</button>
    <button onclick="buttons.move()">Move (Center, Center)</button>
    <button onclick="buttons.resize()">Resize (50%, 50%)</button>
    <button onclick="buttons.title()">Set Title</button>
    <button onclick="buttons.color()">Set Color</button>
    <button onclick="buttons.close()">Close</button>
</div>
var winbox = new WinBox("Controls", {

    mount: document.getElementById("controls"),
    border: 4,
    onclose: function(force){
        return !force && !confirm("Close window?");
    }
});
window.buttons = {

    minimize: function(){

        winbox.minimize();
    },
    maximize: function(){

        winbox.maximize();
    },
    fullscreen: function(){

        winbox.fullscreen();
    },
    move: function(){

        winbox.move("center", "center");
    },
    resize: function(){

        winbox.resize("50%", "50%");
    },
    title: function(){

        winbox.setTitle("Title-" + Math.random());
    },
    color: function(){

        winbox.setBackground(
            "rgb(" + (Math.random() * 255 | 0) + "," +
                     (Math.random() * 255 | 0) + "," +
                     (Math.random() * 255 | 0) + ")"
        );
    },
    modal: function(){

        winbox.body.parentNode.classList.toggle("modal");
    },
    close: function(){

        winbox.close();
    },
    force_close: function(){

        winbox.close(true);
    }
};
Run Code




Window Boilerplate

WinBox Boilerplate

Custom Styles (Global)

.winbox {
    background: linear-gradient(90deg, #ff00f0, #0050ff);
    border-radius: 12px 12px 0 0;
    box-shadow: none;
}

.winbox.min {
    border-radius: 0;
}

.wb-body {
    /* the width of window border: */
    margin: 4px;
    color: #fff;
    background: #131820;
}

.wb-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}
Custom Icons

.wb-icon * {
    opacity: 0.65;
}

.wb-icon *:hover {
    opacity: 1;
}

.wb-min {
    background-image: url(src/img/min.svg);
    background-size: 15px center;
}

.wb-max {
    background-image: url(src/img/max.svg);
}

.wb-close {
    background-image: url(src/img/close.svg);
}

.wb-full {
    display: none;
}
Custom Scrollbars

.wb-body::-webkit-scrollbar {
    width: 12px;
}
.wb-body::-webkit-scrollbar-track {
    background: transparent;
}
.wb-body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #263040;
}
.wb-body::-webkit-scrollbar-thumb:window-inactive {
    background: #181f2a;
}
.wb-body::-webkit-scrollbar-corner {
    background: transparent;
}
new WinBox("Custom CSS", {

    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code




Custom Styles By Classname

.winbox.my-theme{
    background: #fff;
}
.winbox.my-theme .wb-body {
    color: #fff;
    background: #131820;
}
.winbox.my-theme .wb-title {
    color: #000;
}
.winbox.my-theme .wb-icon {
    filter: invert(1);
}
new WinBox("Custom CSS (Class)", {

    class: "my-theme",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code




Use Theme

<head>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
    <link rel="stylesheet" href="dist/css/themes/modern.min.css">
    <script src="dist/js/winbox.min.js"></script>
</head>
new WinBox("Theme", {

    class: "modern",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code