平日喜欢关注一些新闻，经常会浏览！
但是很少看到评论的回复。与是仔细寻找之，发现原来是通过一个页面的弹出遮罩来显示的。
与是仔细研究一翻，自己模拟出来一个，感觉还行，兼容ie8/chrome/firefox.
思路：主页面和遮罩是两个不同的页面，遮罩通过iframe利用js加载进来。
代码如下：
index.html
代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scripttype="text/javascript"src="
<title>append-iframe</title>
<styletype="text/css">
html,body{height:100%;padding:0px;margin:0px;}
</style>
</head>
<body>
<div><inputtype="button"value="show"id="show-id"/></div>
<div><inputtype="button"value="test"id="test-id"/></div>
<scripttype="text/javascript">
$("#show-id").on("click",function(){
$(top.document.body).append('<iframesrc="subiframe.html"id="np-pop-iframe"allowtransparency="true"frameborder="0"scrolling="no"style="width:100%;z-index:9999;position:fixed;top:0px;left:0px;border:none;overflow:hidden;height:100%;"data-nick=""data-pic=""data-id=""parentid=""></iframe>');
});
$("#test-id").on("click",function(){
alert("test");
});
</script>
</body>
</html>
subiframe.html:
代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scripttype="text/javascript"src="
<title>Document</title>
<styletype="text/css">
html,body{height:100%;padding:0px;margin:0px;}
.np-popframe-bg-opacity{
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
.wrapper{
position:absolute;
border:1pxsolidred;
width:800px;
height:800px;
background:#fff;
top:1000px;
left:500px;
}
</style>
</head>
<bodyclass="iframe-body"style="background-image:none;width:100%;height:100%;background-position:initialinitial;background-repeat:initialinitial;">
<divclass="np-popframe-bg-opacity"style="height:100%;width:100%;background-color:#000;"></div>
<divclass="np-popframe-bg"id="np-popframe-bg-id"style="height:100%;width:100%;position:absolute;top:0px;left:0px;"></div>
<divclass="wrapper"id="wrapper-id"></div>
</body>
<scripttype="text/javascript">
(function(){
$("#wrapper-id").animate({top:"100px"},"slow");
$("#np-popframe-bg-id").on("click",function(){
//$(window.parent.document.getElementById("np-pop-iframe")).remove();
$("#np-pop-iframe",window.parent.document).remove();
});
})(jQuery);
</script>
</html>
这里需要用一到滤镜。让加载来的遮罩保持透明.
1np-popframe-bg-id的作用主要是显示评论框的外部区域。当鼠标点击该区域的时候，移除iframe.
2div需要设置100%的高度，需要在前面加上html,body{height:100%;}的css，否则无效
3还有一点就是绝对定位的absolute.
更多信息请查看IT技术专栏