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

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