jQuery弹出遮罩层实例程序代码

特点：代码量少，简单易用。没有格式限制，随意的代码填充。舍弃了在ie6/7/8下的完全兼容（背景不透明），仅保证信息内容可正常阅读。

缺点：考虑到在触屏手机上的效果，未添加对scroll事件的响应，否则有可能永远看不到弹出的内容（网页的缩放会影响scrollTop值）。

相关插件要么功能太强大体积也大，要么是固定的格式需要预设标题、内容、关闭按钮等。非固定样式又非常灵活的一时没找到，就把手头的一个有bug的原生javascript弹出层改动了一下，借助jQuery绕开了麻烦的兼容性问题，正好如今每个项目都用了jQuery，最终效果凑合着用还是可以的。更好的实现方法和能兼容手机的方法还望有高手多多指点，发现有问题也请多多批评指正。

HTML

代码如下

复制代码

<div id="background"></div>
<div id="content">
这里可以是随意的标签、随意的内容 - mming
</div>
<input id="btn" type="button" value="点我" />CSS

#background {position:absolute; z-index:998; top:0px; left:0px; background:rgb(50,50,50);background:rgba(0,0,0,0.5); display:none;}
#content {position:absolute; width:500px; z-index:999; padding:10px; background:#fff; border-radius:5px; display:none;}jQuery

$(function() {
    function conPosition() {
        var oBackground = document.getElementById("background");
        var dw = $(document).width();
        var dh = $(document).height();
        oBackground.style.width = dw+'px';
        oBackground.style.height = dh+'px';
        var oContent = document.getElementById("content");
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var l = (document.documentElement.clientWidth - oContent.offsetWidth) / 2;
        var t = ((document.documentElement.clientHeight - oContent.offsetHeight) / 2) + scrollTop;
        oContent.style.left = l + 'px';
        oContent.style.top = t + 'px';
    }
    $("#btn").click(function() {
        $("#background, #content").show();
        conPosition();
    });
    $("#background").click(function() {$("#background, #content").hide();});
    //点击黑色背景隐藏弹出层，当然可以绑定在任意一个按钮上
    $(window).resize(function() {conPosition();});
    //$(window).scroll(function() {conPosition();});
    //开启内容跟随垂直滚动条（水平滚动条需要处理的问题更多，暂时没有考虑）
});

完整实例

代码如下

复制代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的jquery弹出遮罩层DEMO - mming 前端博客</title>
<meta name="keywords" content="jquery弹出层,jquery遮罩层" />
<meta name="description" content="特点：代码量少，简单易用。没有格式限制，随意的代码填充。舍弃了在ie6/7/8下的完全兼容，仅保证信息内容可正常显示。" />

.wrapper {width:600px; margin:0 auto; padding-bottom:50px;}
.ad {width:468px; margin:10px auto 0;}
.ad li {padding-top:5px;}

h1 {height:50px; line-height:50px; font-size:22px; font-weight:normal; font-family:"Microsoft YaHei",SimHei;}

.download {display:inline-block; height:34px; line-height:34px; padding:0 10px; background:#333; font-size:14px; font-weight:bold; text-align:center; color:#fff; border:1px solid #999; margin-top:10px;}
.fenxiang {height:16px; padding:20px 0 10px; margin-bottom:10px;}

.shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;}
.shuoming dt {height:30px; line-height:30px; font-weight:bold; text-indent:10px;}
.shuoming dd {line-height:20px; padding:5px 20px;}

.tongji {display:none;}

.wrapper {width:600px;}
#background {position:absolute; z-index:998; top:0px; left:0px; background:rgb(50,50,50);background:rgba(0,0,0,0.5); display:none;}
#content {position:absolute; width:500px; z-index:999; padding:10px; background:#fff; border-radius:5px; display:none;}
</style>

var oContent = document.getElementById("content");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

var l = (document.documentElement.clientWidth - oContent.offsetWidth) / 2;
var t = ((document.documentElement.clientHeight - oContent.offsetHeight) / 2) + scrollTop;

  oContent.style.left = l + 'px';
  oContent.style.top = t + 'px';
}

$("#btn").click(function() {
  $("#background, #content").show();
  conPosition();
});

$("#background").click(function() {$("#background, #content").hide();});
$(window).resize(function() {conPosition();});
//$(window).scroll(function() {conPosition();});
});
</script>
</head>

<body>
<div id="background"></div>
<div id="content">
这里可以是随意的标签、随意的内容 - mming
</div>

</div>

</body>
</html>

时间： 2024-08-01 23:11:41

jQuery弹出遮罩层实例程序代码

jQuery弹出遮罩层实例程序代码的相关文章

jQuery弹出遮罩层效果完整示例_jquery

简单的jQuery弹出遮罩层例子

jQuery点击按钮弹出遮罩层且内容居中特效_jquery

jquery弹出遮掩层效果【附实例代码】_jquery

js 弹出框插件实例与代码使用方法

jQuery弹出div层过2秒自动消失_jquery

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码_jquery

jquery弹出div对话框实例代码

兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码_jquery