<!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">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="static/css/railscasts.min.css">
<title>WinBox.js – Modern HTML5 Window Manager</title>
<link rel="stylesheet" href="static/css/winbox.min.css">
<link rel="stylesheet" href="static/css/modern.min.css">
<link rel="stylesheet" href="static/css/white.min.css">
<script src="static/js/winbox.min.js"></script>
<!--<script src="dist/winbox.bundle.js"></script>-->
<style>
/* 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(static/image/max.svg);
background-size: 17px auto;
}
.winbox.custom .wb-min {
background-image: url(static/image/min.svg);
}
.winbox.custom .wb-close {
background-image: url(static/image/close.svg);
}
.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);
}
</style>
<link rel="stylesheet" href="static/css/style.css">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!">
<meta name="keywords" content="window manager, web window, html5 popup, javascript window, web desktop, html5 windows, web frame, web box">
<meta property="og:site_name" content="WinBox - HTML5 window manager">
<meta property="og:title" content="WinBox - HTML5 window manager">
<meta property="og:description" content="WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!">
<meta property="og:type" content="Software">
</head>
<body>
<div class="background"></div>
<div class="scroll">
<div class="wrapper">
<h1 style="margin-bottom: 0"><img src="static/picture/winbox-gradient.svg" alt="WinBox.js: HTML5 Window Manager for the Web." width="2400" height="811"></h1>
<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%"
}
轻量级html5 WinBox页面弹窗插件.rar （13个子文件） 
hjiaoben72 
index.html 28KB static picture 
boilerplate.svg 16KB winbox-gradient.svg 7KB image max.svg 429B min.svg 130B close.svg 322B js 
winbox.min.js 7KB highlight.min.js 130KB css style.css 3KB modern.min.css 1014B white.min.css 105B winbox.min.css 4KB railscasts.min.css 918B资源评论
