html弹出div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>弹出层</title>
        <meta charset="utf-8">
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
        <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">
            //弹出隐藏层
            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;  // bgdiv.style.height = $(document).height();

                $("#" + 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 id="Button1" 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>

懒人转载网友：https://blog.csdn.net/llayjun/article/details/79196465
posted on 2019-01-03 19:23 车车12138 阅读(334) 评论(0) 编辑收藏举报