WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!
Show Example
Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level.
Thanks a lot,
Thomas (ts-thomas)
Load Library (Bundle)
<head>
<script src="dist/winbox.bundle.min.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.querySelector("main")
});
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
Custom Icon (Titlebar)
new WinBox({
title: "Custom Icon",
icon: "demo/wikipedia.svg",
background: "#252b4e"
});
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)", {
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({
// configuration:
index: 1,
id: "my-window",
root: document.body,
class: ["no-full", "no-max", "my-theme"],
// appearance:
title: "All Options",
background: "#fff",
border: 4,
header: 45,
icon: false,
// initial state:
modal: false,
max: false,
min: false,
hidden: false,
// dimension:
width: 250,
height: 200,
minheight: 55,
minwidth: 100,
maxheight: 300,
maxwidth: 500,
autosize: true,
// position:
x: "center",
y: "center",
// viewport boundaries:
top: 50,
right: 50,
bottom: 0,
left: 50,
// contents (choose from):
url: false,
mount: false,
html: "width: 250, height: 200",
// callbacks:
oncreate: function(options){
options.icon = "demo/wikipedia.svg"
},
onshow: function(){
console.log("Show:", this.id);
},
onhide: function(){
console.log("Hide:", this.id);
},
onfocus: function(){
this.setBackground("#fff");
},
onblur: function(){
this.setBackground("#999");
},
onresize: function(w, h){
this.body.textContent =
`width: ${w}, height: ${h}`;
},
onmove: function(x, y){
this.body.textContent =
`x: ${x}, y: ${y}`;
},
onclose: function(force){
return !confirm("Close window?");
},
onfullscreen: function(){
console.log("Fullscreen:", this.id);
},
onmaximize: function(){
console.log("Maximize:", this.id);
},
onminimize: function(){
console.log("Minimize:", this.id);
},
onrestore: function(){
console.log("Restore:", this.id);
}
});
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(!this.min);
},
maximize: function(){
winbox.maximize(!this.max);
},
fullscreen: function(){
winbox.fullscreen(!this.full);
},
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.toggleClass("modal");
},
close: function(){
winbox.close();
},
force_close: function(){
winbox.close(true);
}
};
Run Code
Window 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 {
/* set the width of window border via margin: */
margin: 4px;
color: #fff;
background: #131820;
}
.wb-title {
font-size: 13px;
text-transform: uppercase;
font-weight: 600;
}
Customize Control Icons
.wb-control * {
opacity: 0.65;
}
.wb-control *: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-control {
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
Custom Controls
.wb-like {
background-size: 20px auto;
}
.wb-like.active {
background-image: url(demo/heart-filled.svg) !important;
}
const winbox = new WinBox("Custom Controls");
winbox.removeControl("wb-max").removeControl("wb-min");
winbox.addControl({
index: 0,
class: "wb-like",
image: "demo/heart.svg",
click: function(event, winbox){
// the winbox instance will be passed as 2nd parameter
console.log(winbox.id);
// "this" refers to the button which was clicked:
this.classList.toggle("active");
}
});
Run Code
Custom Template (Layout)
.wb-custom {
background-image: url(demo/icon-github.svg);
background-size: 17px auto;
}
const template = document.createElement("div");
template.innerHTML = `
<div class=wb-header>
<div class=wb-control>
<span class=wb-custom></span>
<span class=wb-close></span>
</div>
<div class=wb-drag>
<div class=wb-title></div>
</div>
</div>
<div class=wb-body></div>
`;
new WinBox("Custom Template", { template });
Run Code