javascript + css 原生态弹出层

最新推荐文章于 2024-05-30 10:52:20 发布

KingCruel

最新推荐文章于 2024-05-30 10:52:20 发布

阅读量660

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/KingCruel/article/details/46832313

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

javascript + css 原生态弹出层

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #divSCA {
            position: absolute;
            width: 880px;
            height: 550px;
            font-size: 12px;
            background: #fff;
            border: 0px solid #000;
            left: 50% !important;
            top: 15% !important;
            margin-left: -440px;
            z-index: 10001;
            display: none;
        }

        .big-div {
            position: absolute;
            left: 0px;
            top: -185px;
            width: 100%;
            height: 2000px;
            background-color: rgb(17, 17, 17);
            opacity: 0.7;
            z-index: 1000;
        }
    </style>
    <script>
        function openDiv() {
            document.getElementById("divSCA").style.display = "block";
            document.getElementById("BigDiv").style.display = "block";
            document.body.parentNode.style.overflow = "hidden";
        }

        function closeDiv() {
            document.getElementById("divSCA").style.display = "none";
            document.getElementById("BigDiv").style.display = "none";
        }
    </script>
</head>
<body>
    <button type="button" class="btn btn-primary" οnclick="openDiv()">
        Select Deposit
    </button>
    <div id="divSCA">
        <button type="button" οnclick="closeDiv()">
            X
        </button>
    </div>
    <div id="BigDiv" class="big-div" style="display:none"></div>
</body>
</html>