亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

評(píng)論回復(fù)彈出遮罩效果實(shí)現(xiàn)思路兼容ie 8/chrome/firefox

  發(fā)布時(shí)間：2014-04-01 17:21:03   作者：佚名   我要評(píng)論
騰訊網(wǎng)的評(píng)論的回復(fù)效果是通過一個(gè)頁面的彈出遮罩來顯示的，經(jīng)研究自己模擬出來一個(gè)，感覺還行，兼容ie 8/chrome/firefox
平日喜歡關(guān)注一些新聞，經(jīng)常會(huì)瀏覽騰訊網(wǎng)！

但是很少看到評(píng)論的回復(fù)。與是仔細(xì)尋找之，發(fā)現(xiàn)原來是通過一個(gè)頁面的彈出遮罩來顯示的。

與是仔細(xì)研究一翻，自己模擬出來一個(gè)，感覺還行，兼容ie 8/chrome/firefox.

思路：主頁面和遮罩是兩個(gè)不同的頁面，遮罩通過iframe 利用js加載進(jìn)來。

代碼如下：

index.html

復(fù)制代碼
代碼如下:

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<title>append-iframe</title>
<style type="text/css">
html,body{height:100%;padding:0px;margin:0px;}
</style>
</head>
<body>
<div><input type="button" value="show" id="show-id"/></div>
<div><input type="button" value="test" id="test-id"/></div>
<script type="text/javascript">
$("#show-id").on("click",function(){
$(top.document.body).append('<iframe src="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:

復(fù)制代碼
代碼如下:

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<title>Document</title>
<style type="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:1px solid red;
width:800px;
height: 800px;
background: #fff;
top:1000px;
left:500px;
}
</style>
</head>
<body class="iframe-body" style="background-image: none; width: 100%; height: 100%; background-position: initial initial; background-repeat: initial initial;">
<div class="np-popframe-bg-opacity" style="height: 100%; width:100%; background-color:#000;"></div>
<div class="np-popframe-bg" id="np-popframe-bg-id" style="height: 100%; width:100%; position:absolute; top:0px; left:0px;"></div>
<div class="wrapper" id="wrapper-id"></div>
</body>
<script type="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>

這里需要用一到濾鏡。讓加載來的遮罩保持透明.

1 np-popframe-bg-id 的作用主要是顯示評(píng)論框的外部區(qū)域。當(dāng)鼠標(biāo)點(diǎn)擊該區(qū)域的時(shí)候，移除iframe.

2 div 需要設(shè)置100%的高度，需要在前面加上 html,body{height:100%;}的css，否則無效

3 還有一點(diǎn)就是絕對(duì)定位的absolute.

偶有所得，以記錄之，謹(jǐn)防忘記！

相關(guān)文章

最新評(píng)論