简单遮罩层

来源：互联网发布：java web acl权限控制编辑：程序博客网时间：2024/06/06 12:55

<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" onclick="showdiv();" />    <div id="bg"></div>    <div id="show">        测试        <input id="btnclose" type="button" value="Close" onclick="hidediv();" />    </div>

0 0