关闭

javascript + css 原生态弹出层

414人阅读 评论(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" onclick="openDiv()">
        Select Deposit
    </button>
    <div id="divSCA">
        <button type="button" onclick="closeDiv()">
            X
        </button>
    </div>
    <div id="BigDiv" class="big-div" style="display:none"></div>
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:407559次
    • 积分:5550
    • 等级:
    • 排名:第4758名
    • 原创:210篇
    • 转载:2篇
    • 译文:1篇
    • 评论:32条
    最新评论