| 标题 | 评论回复弹出遮罩效果实现思路兼容ie8/chrome/firefox |
| 内容 | 平日喜欢关注一些新闻，经常会浏览！ 但是很少看到评论的回复。与是仔细寻找之，发现原来是通过一个页面的弹出遮罩来显示的。 与是仔细研究一翻，自己模拟出来一个，感觉还行，兼容ie8/chrome/firefox. 思路：主页面和遮罩是两个不同的页面，遮罩通过iframe利用js加载进来。 代码如下： index.html 代码如下: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <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""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <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. |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。