Goto Github

WinBox.js


Show Example



Class Constructor 

WinBox(root, options<key: value>)


Basic Window 

new WinBox("Basic Window");
Run Code



Custom Root 

new WinBox(document.body, "Custom Root");
Run Code



Custom Color 

new WinBox(document.body, {

    title: "Custom Color",
    color: "#ff005d"
});
Run Code



Custom Border 

new WinBox(document.body, {

    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(document.body, {

    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(document.body, {

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



All Options 

new WinBox(document.body, {

    title: "All Options",
    id: "my-window",
    class: "my-theme",
    color: "#ff005d",
    border: 4,
    width: 200,
    height: 200,
    x: 100,
    y: 100,
    top: 50,
    right: 50,
    bottom: 50,
    left: 50,
    html: "width: 200, height: 200",
    onfocus: function(){
        this.setColor("#ff005d"); // this => WinBox
    },
    onblur: function(){
        this.setColor("#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.setColor(
            "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(to right, #ff00f0, #0050ff);
    border-radius: 12px 12px 0 0;
    box-shadow: none;
}

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

.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);
}

.winbox:fullscreen .icon-fullscreen{
    background-image: url(src/img/minimize.svg);
    background-size: 17px 17px;
}

.winbox-body {
    margin: 4px; /* => width of window border */
    color: #fff;
    background: #131820;
}
new WinBox({

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



Custom Styles (Classes) 

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

.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; /* => width of window border */
    color: #fff;
    background: #131820;
}
new WinBox({

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