Goto Github

WinBox.js: HTML5 Window Manager for the Web.

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


Show Example



Class Constructor 

WinBox(options<key: value>)


Basic Window 

new WinBox("Basic Window");
Run Code



Custom Color 

new WinBox({
    title: "Custom Color",
    background: "#ff005d"
});
Run Code



Custom Root 

new WinBox({
    title: "Custom Root",
    root: document.body
});
Run Code



Custom Border 

new WinBox({
    title: "Custom Border",
    border: 4
});
Run Code



Limit Viewport 

new WinBox({
    title: "Limit Viewport",
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
});
Run Code



Custom Position / Size 

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



Set innerHTML 

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



Mount DOM (Cloned) 

new WinBox({
    title: "Mount DOM",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code



Mount DOM (Singleton) + Auto-Unmount 

new WinBox({
    title: "Mount DOM",
    mount: document.getElementById("content")
});
Run Code



Open URI / URL (iFrame) 

new WinBox({
    title: "Wikipedia",
    url: "https://wikipedia.com"
});
Run Code



All Options 

new WinBox({

    id: "my-window",
    class: "my-theme",
    root: document.body,
    title: "All Options",
    background: "#ff005d",
    border: 4,
    width: 200,
    height: 200,
    x: "center",
    y: "center",
    max: false,
    top: 50,
    right: 50,
    bottom: 50,
    left: 50,
    html: "width: 200, height: 200",
    onfocus: function(){
        this.setBackground("#ff005d"); // this => WinBox
    },
    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(){
        alert("event 'onclose' fired")
    }
});
Run Code



Controls 

var winbox = new WinBox({
    title: "Controls",
    mount: document.getElementById("controls")
});
const 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) + ")"
        );
    },
    "close": function(){

        winbox.close();
    }
};
Run Code



Custom Styles (Global) 

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

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

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

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

.winbox-icon span{
    opacity: 0.65;
}

.winbox-icon span:hover{
    opacity: 1;
}

.icon-min {
    background-image: url(src/img/minus.svg);
    background-size: 14px 14px;
}

.icon-max {
    display: none;
}

.icon-close {
    background-image: url(src/img/close.svg);
    background-size: 14px 14px;
}

.icon-fullscreen {
    background-image: url(src/img/maximize.svg);
}
new WinBox({

    title: "Custom CSS",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code



Custom Scrollbars 

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

    title: "Custom Scrollbars",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code



Custom Styles (By Classes) 

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

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

.winbox.custom .winbox-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}

.winbox.custom .icon-max {
    display: none;
}

.winbox.custom .winbox-body {
    margin: 4px; /* the width of window border */
    color: #fff;
    background: #0d1117;
}
new WinBox({

    title: "Custom CSS",
    class: "custom",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
Run Code