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)

Load Library (Non-Bundle)

Class Constructor 

WinBox(title, options)


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: "
Lorem Ipsum
" });
Run Code



Mount DOM (Cloned) 

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 

         
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(static/image/min.svg); background-size: 15px center; } .wb-max { background-image: url(static/image/max.svg); } .wb-close { background-image: url(static/image/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 

    

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