简单遮罩层

最新推荐文章于 2019-04-02 10:06:06 发布

waqxy

最新推荐文章于 2019-04-02 10:06:06 发布

阅读量329

点赞数

本文链接：https://blog.csdn.net/waqxy/article/details/51013075

版权

<script language="javascript" type="text/javascript">

        $(document).ready(function () {
            $("#btnshow").click(function () {
                $("#bg").show();
                //$("#show").fadeIn(1000);
                $("#show").animate({
                    top: '25%',
                    opacity: '1'
                },500);
            });
        });
        //function showdiv() {

        //     document.getElementById("bg").style.display = "block";
        //     document.getElementById("show").style.display = "block";
        // }
         function hidediv() {
             document.getElementById("bg").style.display = 'none';
             document.getElementById("show").style.opacity = '0';
             document.getElementById("show").style.top = '23%';
         }
    </script>

<style type="text/css">
        #bg {
            display: none;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.7;
            opacity: .70;
            filter: alpha(opacity=70);
        }

        #show {
            opacity:0;
            position: fixed;
            top: 23%;
            left: 22%;
            width: 53%;
            height: 49%;
            padding: 8px;
            border: 8px solid #E8E9F7;
            background-color: white;

            z-index: 1002;
            overflow: auto;
        }
    </style>

<input id="btnshow" type="button" value="Show" οnclick="showdiv();" />
    <div id="bg"></div>
    <div id="show">
        测试
        <input id="btnclose" type="button" value="Close" οnclick="hidediv();" />
    </div>