平日喜歡關(guān)注一些新聞，經(jīng)常會(huì)瀏覽！
但是很少看到評(píng)論的回復(fù)。與是仔細(xì)尋找之，發(fā)現(xiàn)原來(lái)是通過(guò)一個(gè)頁(yè)面的彈出遮罩來(lái)顯示的。
與是仔細(xì)研究一翻，自己模擬出來(lái)一個(gè)，感覺(jué)還行，兼容ie8/chrome/firefox.
思路：主頁(yè)面和遮罩是兩個(gè)不同的頁(yè)面，遮罩通過(guò)iframe利用js加載進(jìn)來(lái)。
代碼如下：
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>
這里需要用一到濾鏡。讓加載來(lái)的遮罩保持透明.
1np-popframe-bg-id的作用主要是顯示評(píng)論框的外部區(qū)域。當(dāng)鼠標(biāo)點(diǎn)擊該區(qū)域的時(shí)候，移除iframe.
2div需要設(shè)置100%的高度，需要在前面加上html,body{height:100%;}的css，否則無(wú)效
3還有一點(diǎn)就是絕對(duì)定位的absolute.
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試