Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the pop-up mask effect of comment reply in html

2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

这篇文章给大家分享的是有关html中如何实现评论回复弹出遮罩效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

代码如下:

index.html

代码如下:

append-iframe

html,body{height:100%;padding:0px;margin:0px;}

$("#show-id").on("click",function(){

$(top.document.body).append('');

});

$("#test-id").on("click",function(){

alert("test");

});

subiframe.html:

代码如下:

Document

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;

}

(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);

这里需要用一到滤镜。让加载来的遮罩保持透明.

1 np-popframe-bg-id 的作用主要是显示评论框的外部区域。当鼠标点击该区域的时候,移除iframe.

2 div 需要设置100%的高度,需要在前面加上 html,body{height:100%;}的css,否则无效

3 还有一点就是绝对定位的absolute.

感谢各位的阅读!关于"html中如何实现评论回复弹出遮罩效果"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report