WinBox - HTML5 window manager



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>)

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: 50, left: 50
});

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("Wikipedia", { url: "https://wikipedia.com"
});

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, top: 50, right: 50, bottom: 50, 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(){ alert("event 'onclose' fired") }
});

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")
});
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(); }
};

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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.