jquery 创建遮盖层 示例代码

来源:互联网 发布:apache cxf 日志 配置 编辑:程序博客网 时间:2024/05/16 13:04
    <style type="text/css">    /* 半透明的遮罩层 */#overlay {    background: #000;    filter: alpha(opacity=50); /* IE的透明度 */    opacity: 0.5;  /* 透明度 */    display: none;    position: absolute;    top: 0px;    left: 0px;    width: 100%;    height: 100%;    z-index: 100000; /* 此处的图层要大于页面 */    display:none;}</style>      <script type="text/javascript">    /* 显示遮罩层 */function showOverlay() {    $("#overlay").height(pageHeight());    $("#overlay").width(pageWidth());    // fadeTo第一个参数为速度,第二个为透明度    // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题    $("#overlay").fadeTo(200, 0.5); //遮盖层        adjust("#checkcodediv");        $("#checkcodediv").show();  //显示在遮盖层中间位置的弹窗层    }/* 隐藏覆盖层 */function hideOverlay1() {    $("#overlay").fadeOut(200);    $("#checkcodediv").hide();} /* 当前页面高度 */function pageHeight() {    return document.body.scrollHeight;}/* 当前页面宽度 */function pageWidth() {    return document.body.scrollWidth;}/* 定位到页面中心 */function adjust(id) {    var w = $(id).width();    var h = $(id).height();        var t = scrollY() + (windowHeight()/2) - (h/2);    if(t < 0) t = 0;        var l = scrollX() + (windowWidth()/2) - (w/2);    if(l < 0) l = 0;        $(id).css({left: l+'px', top: t+'px' , display:'block'});       /*var winwid = window.inne rWidth || document.documentElement.clientWidth || document.body.clientWidth,winhei = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,pWidTH = $( id ).width(),Pheight = $( id ).height();$( id ).css({top   :  ( winhei - Pheight )/2,left  :  ( winwid - pWidTH )/2}); */    }//浏览器视口的高度function windowHeight() {    var de = document.documentElement;    return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;}//浏览器视口的宽度function windowWidth() {    var de = document.documentElement;    return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth}/* 浏览器垂直滚动位置 */function scrollY() {    var de = document.documentElement;    return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;}/* 浏览器水平滚动位置 */function scrollX() {    var de = document.documentElement;    return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;} </script>


 

0 0
原创粉丝点击