winbox实现现代化窗口弹出层效果代码-html代码-BFW代码库

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-use.........完整代码请登录后点击上方下载按钮下载查看