firefox

I like to pay attention to some news on weekdays and often browse Tencent!

But I rarely see replies to comments. So I looked for it carefully and found that it was displayed through a pop-up mask on a page.

So I studied it carefully and simulated it myself. It feels good and is compatible with IE 8/Chrome/Firefox.

Idea: The main page and the mask are two different pages, and the mask is loaded in through iframe using js.

The code is as follows:

index.html

Copy code

The code is as follows:

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

Copy code

The code is as follows:

<!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>

A filter is needed here. Make the loaded mask transparent.

1 The main function of np-popframe-bg-id is to display the outer area of the comment box. When the mouse clicks on this area, remove the iframe.

2. The div needs to be set to 100% height. You need to add html, body{height:100%;} css in front of it, otherwise it will be invalid.

3 Another point is absolute positioning.

If you gain something, record it to avoid forgetting it!

<<: Detailed explanation of the Sidecar mode in Docker Compose

>>: Implementation of css transform page turning animation record

How to convert a column of comma-separated values into columns in MySQL

Comment reply pop-up mask effect implementation idea compatible with ie 8/chrome/firefox

How to convert a column of comma-separated values into columns in MySQL

Summary of MySQL lock related knowledge

Docker builds cluster MongoDB implementation steps

Implementation of react routing guard (routing interception)

How to implement Linux deepin to delete redundant kernels

mysql 8.0.18.zip installation and configuration method graphic tutorial (windows 64 bit)

Tutorial on how to deploy LNMP and enable HTTPS service

Detailed explanation of the difference between "/" and "~" in Linux

Solve the conflict between docker and vmware

How to make a List in CocosCreator

Recommend

Sample code for automatic web page refresh and automatic jump

Logrotate implements Catalina.out log rotation every two hours

A brief discussion on how to solve the depends_on order problem in Docker-compose

Steps for packaging and configuring SVG components in Vue projects

Use scripts to package and upload Docker images with one click

Explore VMware ESXI CLI common commands

Detailed explanation of HTML form elements (Part 1)

Analysis of the process of publishing and deploying Spring Boot applications through Docker

How to connect to MySQL database using Node-Red

The difference between char, varchar and text field types in MySQL

Detailed explanation of the points that need to be paid attention to in HTML standards that comply with W3C standards

Should I abandon JQuery?

CSS3 uses transform-origin to achieve dot distribution on a large circle and rotation effects

Vue routing returns the operation method of restoring page status

js to implement the snake game with comments