评价回应弹出遮罩实际效果完成思路适配ie 8/ch

日期:2020-11-02 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

平常喜爱关心1些新闻,常常会访问腾迅网!

可是非常少看到评价的回应。与是细心找寻之,发现原先是根据1个网页页面的弹出遮罩来显示信息的。

与是细心科学研究1翻,自身仿真模拟出来1个,觉得还行,适配ie 8/chrome/firefox.

思路:首页面和遮罩是两个不一样的网页页面,遮罩根据iframe 运用js载入进来。

编码以下:

index.html

拷贝编码
编码以下:

<!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⑻">
<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:

拷贝编码
编码以下:

<!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⑻">
<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到滤镜。让载入来的遮罩维持全透明.

1 np-popframe-bg-id 的功效关键是显示信息评价框的外界地区。当电脑鼠标点一下该地区的情况下,移除iframe.

2 div 必须设定100%的高宽比,必须在前面再加 html,body{height:100%;}的css,不然失效

3 也有1点便是肯定精准定位的absolute.

偶有一定的得,以纪录之,严防忘掉!