Web前端点击弹出层-点击关闭 事件

网站前端开发国外框架 开发微信公众号前端框架 电商web前端开发框架

代码片段 1

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>点击弹出层-点击关闭</title>
    <style>
        .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        border: 16px solid lightblue;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
    .white_content_small {
        display: none;
        position: absolute;
        top: 20%;
        left: 30%;
        width: 40%;
        height: 50%;
        border: 16px solid lightblue;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
    </style>
    <script type=”text/javascript” src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js”></script>
    <script type=”text/javascript”>
        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = ‘block’;
            document.getElementById(bg_div).style.display = ‘block’;
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            $(“#” + bg_div).height($(document).height());
        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = ‘none’;
            document.getElementById(bg_div).style.display = ‘none’;
        };
    </script>
</head>
<body>
    <input type=”button” value=”点击弹出层” onclick=”ShowDiv(‘MyDiv’,’fade’)” />
    <!–弹出层时背景层DIV–>
    <div id=”fade” class=”black_overlay”></div>
    <div id=”MyDiv” class=”white_content”>
        <div style=”text-align: right; cursor: default; height: 40px;”>
            <span style=”font-size: 16px;” onclick=”CloseDiv(‘MyDiv’,’fade’)”>关闭</span>
        </div>
        目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
    </div>
</body>
</html>

前端框架开发规范 微信前端开发框架选择 web前端移动端页面开发框架

» 本文来自:前端开发者 » 《Web前端点击弹出层-点击关闭 事件》
» 本文链接地址:https://www.rokub.com/5920.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!