winbox实现现代化窗口弹出层效果代码
代码语言：html
所属分类：弹出层
代码描述：winbox实现现代化窗口弹出层效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!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 o.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0