WinBox是一款现代Web 窗口弹出层管理器-BFW插件库

WinBox是一款现代Web 窗口弹出层管理器

WinBox是一款现代 Web 窗口弹出层管理器：轻量级、出色的性能、无依赖、完全可定制、开源！

使用方式：

第一步引入插件

第二步配置参数

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

创建和设置窗口

基本窗口

当root指定no时，窗口将附加到document.body.

new WinBox("Window Title");
WinBox.new("Window Title");

或者：

new WinBox({
title: "Window Title"
});
或者：

var winbox = WinBox();
winbox.setTitle("Window Title");

自定义根

根是窗口将附加到的文档中的唯一元素。在大多数情况下，这通常document.body是默认根。同时多个根只是部分支持（它们实际上共享相同的视口）。

new WinBox("Window Title", {
root: document.body
});
自定义颜色

支持样式属性“背景”也支持的所有 CSS 样式，例如颜色、透明颜色、hsl、渐变、背景图像。

new WinBox("Custom Color", {
background: "#ff005d"
});
或者：

var winbox = new WinBox("Custom Color");
winbox.setBackground("#ff005d");

自定义边框

支持所有单位。

new WinBox({
title: "Custom Border",
border: "1em"
});

您还可以定义多个边框值（顺序为：上、右、下、左）：

new WinBox({
title: "Custom Border",
border: "0 1em 15px 1em"
});

自定义视口

定义窗口可以移动或可以调整大小的可用区域（相对于文档）（支持单位“px”和“%”）。

new WinBox("Custom Viewport", {
top: "50px",
right: "5%",
bottom: 50,
left: "5%"
});

或者（只支持数字！）：

var winbox = new WinBox("Custom Viewport");
winbox.top = 50;
winbox.right = 200;
winbox.bottom = 0;
winbox.left = 200

自定义位置/尺寸

支持 x 轴“右”，y 轴“底部”，两者都支持“中心”，单位“px”和“%”也都支持。

new WinBox("Custom Viewport", {
x: "center",
y: "center",
width: "50%",
height: "50%"
});

new WinBox("Custom Viewport", {
x: "right",
y: "bottom",
width: "50%",
height: "50%"
});
或者（也支持与上述相同的单位）：

var winbox = new WinBox("Custom Viewport");
winbox.resize("50%", "50%")
.move("center", "center");
或者（只支持数字！）：

ar winbox = new WinBox("Custom Viewport");
winbox.width = 200;
winbox.height = 200;
winbox.resize();
winbox.x = 100;
winbox.y = 100;
winbox.move();

模态窗口

new WinBox({
title: "Modal Window",
modal: true
});

主题

随意创建您自己的主题并与我们分享。

加载相应的 css 文件（或使用打包器），例如：

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

只需将主题名称添加为类：

var winbox = new WinBox({
title: "Theme: Modern",
class: "modern"
});

或者：

var winbox = new WinBox("Theme: Modern");
winbox.addClass("modern");
您可以在窗口的生命周期内更改主题。

管理窗口内容

设置内部HTML

不要忘记清理作为html一部分的任何用户输入，因为这可能导致意外的 XSS！

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

或者：

var winbox = new WinBox("Set innerHTML");
winbox.body.innerHTML = "<h1>Lorem Ipsum</h1>";

挂载 DOM（克隆）

通过克隆，您可以轻松地并行创建相同内容的多个窗口实例。

<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum [...]</p>
</div>

var node = document.getElementById("content");
new WinBox("Mount DOM", {
mount: node.cloneNode(true)
});

或者：

var node = document.getElementById("content");
var winbox = new WinBox("Mount DOM");
winbox.mount(node.cloneNode(true));
窗口实例

窗口状态/信息：
var winbox = new WinBox();
console.log("Window ID:", winbox.id);
console.log("Current Maximize State:", winbox.max);
console.log("Current Minimize State:", winbox.min);

窗口大小：

var winbox = new WinBox();
winbox.width = 200;
winbox.height = 200;
winbox.resize();
console.log("Current Width:", winbox.width);
console.log("Current Height:", winbox.height);

选项参数

选项	值	描述
id	number \| string	为窗口设置一个唯一的 id。用于在 css 中定义自定义样式，通过上下文查询元素或仅用于标识相应的窗口实例。如果未设置 ID，它将自动为您创建一个。
index	number	将z-index窗口的初始值设置为此值（未聚焦/聚焦时可以自动增加）。
title	string	窗口标题。
mount	HTMLElement	将元素（小部件、模板等）安装到窗口主体。
html	string	设置innerHTML窗口主体的。
url	string	在窗口内打开 URL（通过 iframe 加载）。
width height	number \| string	设置窗口的初始宽度/高度（支持单位“px”和“%”）。
minwidth minheight	number \| string	设置窗口的最小宽度/高度（支持单位“px”和“%”）
x y	number \| string	设置窗口的初始位置（支持：x轴为“右”，y轴为“底部”，两者都为“中心”，两者的单位为“px”和“%”）。
max	boolean	创建时自动将窗口切换到最大化状态。
top right bottom left	number \| string	设置或限制窗口可用区域的视口（支持单位“px”和“%”）。
background	string	设置窗口的背景（支持样式属性“背景”也支持的所有CSS样式，例如颜色、透明颜色、hsl、渐变、背景图像）
border	number	设置窗口的边框宽度（支持所有 css 单位，如 px、%、em、rem、vh、vmax）。
class	string	向窗口添加一个或多个类名（多个类名作为数组或用空格分隔，例如“class-a class-b”）。用于在 css 中定义自定义样式，按上下文（也在 CSS 中）查询元素或仅标记相应的窗口实例。
modal	boolean	将窗口显示为模态。
onmove	function(x, y)	窗口移动时触发的回调。this回调函数内的关键字是指对应的 WinBox 实例。
onresize	function(width, height)	当窗口调整大小时触发回调。this回调函数内的关键字是指对应的 WinBox 实例。
onclose	function(force)	窗口关闭时触发的回调。this回调函数内的关键字是指对应的 WinBox 实例。注意：事件 'onclose' 将在关闭之前触发，并在应用回调并返回真值时停止关闭。
onfocus onblur	function()	对多个事件的回调。this回调函数内的关键字是指对应的 WinBox 实例。
splitscreen	boolean	启用分屏功能，通过在窗口旁边拖动来并排查看两个窗口

在线示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/winbox.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/winbox.theme.modern.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/winbox.theme.white.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/winbox.min.js"></script>
    <!--<script src="dist/winbox.bundle.js"></script>-->
    <style>
        pre {
            background: #000033;
            border: 1px dashed white;
            padding: 10px 2px;
        }
        /* WinBox Theme: "custom" */

        .winbox.custom {
            background: linear-gradient(90deg, #ff00f0, #0050ff);
            box-shadow: none;
            border-radius: 12px 12px 0 0;
        }
        .winbox.custom.max,
        .winbox.custom.min {
            border-radius: 0;
        }
        .winbox.custom .wb-body {
            /* margin represents the width of window border: */
            margin: 4px;
            color: #fff;
            background: #131820;
        }
        .winbox.custom .wb-title {
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 600;
        }
        .winbox.custom .wb-icon * {
            opacity: 0.65;
        }
        .winbox.custom .wb-icon *:hover {
            opacity: 1;
        }
        .winbox.custom .wb-max {
            background-image: url(//repo.bfw.wiki/bfwrepo/icon/6094f88271192.png);
            background-size: 17px auto;
        }
        .winbox.custom .wb-min {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e64293d9.png);
        }
        .winbox.custom .wb-close {
            background-image: url(//repo.bfw.wiki/bfwrepo/icon/600046a2072ab.png);
        }
        .winbox.custom .wb-full {
            display: none;
        }
        .winbox.custom .wb-body::-webkit-scrollbar {
            width: 12px;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-track {
            background: transparent;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #263040;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-thumb:window-inactive {
            background: #181f2a;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* WinBox Theme: "my-theme" */

        .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);
        }
        * {
            box-sizing: border-box;
            touch-action: manipulation;
        }
        html, body {
            position: absolute;
            overflow: hidden;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0;
            padding: 0;
            border: 0;
            font-family: -apple-system, BlinkMacSystemFont,Helvetica, Arial, "Open Sans", OpenSans, Roboto, Segoe UI, sans-serif;
            text-align: center;
            color: #fff;
            background: linear-gradient(135deg, #0d1117, #131820);

            -webkit-tap-highlight-color: transparent;
            -webkit-text-size-adjust: 100%;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .background {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: inherit;
        }
        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: rgba(13, 17, 23, 0.94);
            padding: 15px 0;
            border-bottom: 1px solid #1c2431;
            z-index: 2;
        }
        .scroll {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
        }
        .wrapper {
            position: relative;
            display: block;
            margin: auto;
            max-width: 600px;
            text-align: left;
            padding: 1.2em;
            padding-top: 90px;
            z-index: 1;
        }
        pre {
            -webkit-touch-callout: default !important;
            -webkit-user-select: text !important;
            -khtml-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            user-select: text !important;
        }
        a {
            display: inline-block;
            color: #3374ff;
            text-decoration: none;
            font-weight: 600;
        }
        b {
            display: block;
            padding: 10px;
        }
        button {
            padding: 5px 10px;
            margin-bottom: 5px;
        }
        h1 {
            margin: 0;
            padding: 0;
        }
        h1 img {
            width: 100%;
            height: auto;
        }
        h2 {
            font-size: 20px;
            font-weight: 400;
            line-height: 27px;
        }
        h3 {
            font-size: 24px;
            font-weight: 600;
            line-height: 32px;
            margin: 0;
        }
        hr {
            border: 0;
            border-bottom: 1px solid #1c2431;
            margin-bottom: 20px;
            padding-top: 20px;
        }
        .button {
            display: inline-block;
            background-color: #0050ff;
            color: #fff;
            width: auto;
            border-radius: 10px;
            padding: 15px 25px;
            cursor: pointer;
        }
        pre {
            display: inline-block;
            margin: auto;
            text-align: left;
            width: 100%;
            max-width: calc(100vw - 1.7em);
        }
        pre code.hljs {
            background: #181f2a;
            padding: 1em 1.5em;
            border-radius: 10px;
            width: 100%;
            max-width: calc(100vw - 1.7em);
        }
        .break {
            height: 18px;
        }

@media (max-width: 600px) {
            .wrapper {
                padding-top: 70px;
            }
            .wrapper, pre {
                display: block;
            }
        }

@media (max-height: 550px) {
            header {
                position: absolute;
            }
        }

        .wb-body {
            color: #000;
        }
        .wb-body > * {
            padding: 1.2em;
        }
        .winbox.iframe .wb-body > * {
            padding: 0;
        }
        .winbox.iframe .wb-body {
            background: linear-gradient(135deg, #0d1117, #131820);
        }

        .hljs {
            color: #fff4ec;
        }
        .hljs-attr {
            color: #79c0ff
        }
        .hljs-name,
        .hljs-built_in {
            color: #ffa657;
        }
        .hljs-attribute {
            color: #e0e7ff
        }
        .hljs-selector-class {
            color: #79c0ff
        }

        .hljs-keyword,
        .hljs-selector-tag {
            color: #f92672
        }

        .hljs-bullet,
        .hljs-link,
        .hljs-literal,
        .hljs-number,
        .hljs-quote,
        .hljs-regexp {
            color: #d2a8ff
        }

    </style>



</head>
<body>
    <div class="background"></div>
    <div class="scroll">
        <div class="wrapper">

            <h2>WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!</h2>
            <br>
            <div class="button" onclick="window.examples['theme-modern']()" style="background-color: #ca00b4">
                Show Example
            </div>
            <br><br>

            <hr>
            <br>
            Load Library (Bundle)
            <br><br>
            <pre><code class="language-html"><head>
                <script src="dist/winbox.bundle.js"></script>
                </head></code></pre>
            <div class="break"></div>
            <br>
            Load Library (Non-Bundle)
            <br><br>
            <pre><code class="language-html"><head>
                <link rel="stylesheet" href="dist/css/winbox.min.css">
                <script src="dist/js/winbox.min.js"></script>
                </head></code></pre>
            <div class="break"></div>

            <hr>
            <br>
            Class Constructor
            <br><br>
            <pre><code class="language-js">WinBox(title, options<key: value>)</code></pre>
            <br>

            <hr>
            <br>
            <div style="color: #79c0ff; line-height: 22px;">
                You can open the browser dev tools and copy and paste the js-code blocks into the console and play with them.
            </div>

            <hr>
            <br>
            Basic Window
            <br><br>
            <pre><code class="language-js">new WinBox("Basic Window");</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['basic']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Custom Root
            <br><br>
            <pre><code class="language-js">new WinBox("Custom Root", {

                root: document.body
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['root']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Custom Border
            <br><br>
            <pre><code class="language-js">new WinBox("Custom Border", {

                border: "0.3em"
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['border']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Custom Color
            <br><br>
            <pre><code class="language-js">new WinBox({

                title: "Custom Color",
                background: "#ff005d",
                border: 4
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['color']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Limit Viewport
            <br><br>
            <pre><code class="language-js">new WinBox("Limit Viewport", {

                top: 50,
                right: 50,
                bottom: 0,
                left: 50
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['viewport']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Splitscreen
            <br><br>
            <pre><code class="language-js">new WinBox("Splitscreen (Left)", {

                right: "50%",
                max: true
                });

                new WinBox("Splitscreen (Right)", {

                x: "100%",
                left: "50%",
                max: true
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['splitscreen']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Custom Position / Size
            <br><br>
            <pre><code class="language-js">new WinBox({

                title: "Custom Position / Size",
                x: "center",
                y: "center",
                width: "50%",
                height: "50%"
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['position']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Modal Window
            <br><br>
            <pre><code class="language-js">new WinBox("Modal Window", {

                modal: true
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['modal']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Set innerHTML
            <br><br>
            <pre><code class="language-js">new WinBox({

                title: "Set innerHTML",
                html: "<h1>Lorem Ipsum</h1>"
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['innerhtml']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Mount DOM (Cloned)
            <br><br>

            <pre><code class="language-html"><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></code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Mount DOM", {

                mount: document.getElementById("content")
                .cloneNode(true)
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['mount-clone']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Mount DOM (Singleton) + Auto-Unmount
            <br><br>
            <pre><code class="language-js">new WinBox("Mount DOM", {

                mount: document.getElementById("content")
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['mount-auto']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Open URI / URL
            <br><br>
            <pre><code class="language-js">new WinBox("WinBox.js", {

                url: "https://nextapps-de.github.io/winbox/"
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['iframe']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            All Options
            <br><br>
            <pre><code class="language-js">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?");
                }
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['all-options']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Control Programmatically
            <br><br>
            <pre><code class="language-html"><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></code></pre>
            <div class="break"></div>
            <pre><code class="language-js">var winbox = new WinBox("Controls", {

                mount: document.getElementById("controls"),
                border: 4,
                onclose: function(force){
                return !force && !confirm("Close window?");
                }
                });</code></pre>
            <div class="break"></div>
            <pre><code class="language-js">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);
                }
                };</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['controls']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Window Boilerplate
            <br><br>
            <img src="demo/boilerplate.svg" width="100%" alt="WinBox Boilerplate">

            <hr>
            <br>
            Custom Styles (Global)
            <br><br>
            <pre><code class="language-css">.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;
                }</code></pre>
            <div class="break"></div>

            Custom Icons
            <br><br>
            <pre><code class="language-css">.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;
                }</code></pre>
            <div class="break"></div>

            Custom Scrollbars
            <br><br>
            <pre><code class="language-css">.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;
                }</code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Custom CSS", {

                mount: document.getElementById("content")
                .cloneNode(true)
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['custom-css']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Custom Styles By Classname
            <br><br>
            <pre><code class="language-css">.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);
                }</code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Custom CSS (Class)", {

                class: "my-theme",
                mount: document.getElementById("content")
                .cloneNode(true)
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['custom-class']()">
                Run Code
            </div>
            <br><br>

            <hr>
            <br>
            Use Theme
            <br><br>
            <pre><code class="language-html"><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></code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Theme", {

                class: "modern",
                mount: document.getElementById("content")
                .cloneNode(true)
                });</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['theme-modern']()">
                Run Code
            </div>
            <br><br>

        </div>
    </div>
    <div id="backstore" style="display: none">
        <div id="content">
            <h1>Lorem Ipsum</h1>
            <p>
                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.
            </p>
            <p>
                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.
            </p>
            <p>
                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.
            </p>
        </div>
        <div id="controls">
            <button onclick="window.buttons['minimize']()">Minimize (Toggle)</button>
            <button onclick="window.buttons['maximize']()">Maximize (Toggle)</button>
            <button onclick="window.buttons['fullscreen']()">Fullscreen (Toggle)</button>
            <button onclick="window.buttons['modal']()">Modal (Toggle)</button>
            <button onclick="window.buttons['center']()">Move (Center, Center)</button>
            <button onclick="window.buttons['move']()">Move (Right, Bottom)</button>
            <button onclick="window.buttons['resize']()">Resize (50%, 50%)</button>
            <button onclick="window.buttons['title']()">Set Title</button>
            <button onclick="window.buttons['color']()">Set Color</button>
            <button onclick="window.buttons['add']()">Add Class (my-theme)</button>
            <button onclick="window.buttons['remove']()">Remove Class (my-theme)</button>
            <button onclick="window.buttons['close']()">Close</button>
            <button onclick="window.buttons['force_close']()">Force Close</button>
        </div>
    </div>

    <script>

        (function() {

            let winbox;

            window.examples = {

                "basic": function() {

                    new WinBox("Basic Window");
                },
                "root": function() {

                    new WinBox("Custom Root", {

                        root: document.body
                    });
                },
                "border": function() {

                    new WinBox("Custom Border", {

                        border: "0.3em"
                    });
                },
                "color": function() {

                    new WinBox({

                        title: "Custom Color",
                        background: "#ff005d",
                        border: 4
                    });
                },
                "viewport": function() {

                    new WinBox("Limit Viewport", {

                        top: 50,
                        right: 50,
                        bottom: 0,
                        left: 50
                    });
                },
                "splitscreen": function() {

                    new WinBox("Splitscreen (Left)", {

                        right: "50%",
                        max: true
                    });

                    new WinBox("Splitscreen (Right)", {

                        x: "100%",
                        left: "50%",
                        max: true
                    });
                },
                "position": function() {

                    new WinBox({

                        title: "Custom Position / Size",
                        x: "center",
                        y: "center",
                        width: "50%",
                        height: "50%"
                    });
                },
                "modal": function() {

                    new WinBox("Modal Window", {

                        modal: true
                    });
                },
                "innerhtml": function() {

                    new WinBox({

                        title: "Set innerHTML",
                        html: "<h1>Lorem Ipsum</h1>"
                    });
                },
                "mount-clone": function() {

                    new WinBox("Mount DOM", {

                        mount: document.getElementById("content")
                        .cloneNode(true)
                    });
                },
                "mount-auto": function() {

                    new WinBox("Mount DOM", {

                        mount: document.getElementById("content")
                    });
                },
                "iframe": function() {

                    new WinBox("WinBox.js", {

                        url: "https://www.bfw.wiki/",
                        class: "iframe"
                    });
                },
                "all-options": function() {

                    new WinBox({

                        id: "my-window",
                        class: ["no-full", "my-theme"],
                        root: document.body,
                        title: "All Options",
                        background: "#fff",
                        border: 4,
                        index: 50,
                        width: 200,
                        height: 200,
                        minheight: 100,
                        minwidth: 100,
                        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?");
                        }
                    });
                },
                "custom-css": function() {

                    new WinBox("Custom CSS", {

                        class: "custom",
                        mount: document.getElementById("content")
                        .cloneNode(true)
                    });
                },
                "custom-class": function() {

                    new WinBox("Custom CSS (Class)", {

                        class: "my-theme",
                        mount: document.getElementById("content")
                        .cloneNode(true)
                    });
                },
                "theme-modern": function() {

                    new WinBox("Theme: Modern", {

                        class: "modern",
                        mount: document.getElementById("content")
                        .cloneNode(true)
                    });
                },
                "controls": function() {

                    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();
                },
                center: function() {

                    winbox.move("center", "center");
                },
                move: function() {

                    winbox.move("right", "bottom");
                },
                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");
                },
                add: function() {

                    winbox.addClass("my-theme");
                },
                remove: function() {

                    winbox.removeClass("my-theme");
                },
                close: function() {

                    winbox.close();
                },
                force_close: function () {

                    winbox.close(true);
                }
            };

        }());



    </script>
</body>
</html>