平日喜歡關注一些新聞，經常會瀏覽！
但是很少看到評論的回復。與是仔細尋找之，發現原來是通過一個頁面的彈出遮罩來顯示的。
與是仔細研究一翻，自己模擬出來一個，感覺還行，兼容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技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
