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

Tutorial on installing Tomcat server under Windows

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

Tutorial on installing Tomcat server under Windows

Detailed explanation of the working principle and usage of the Docker image submission command commit

How to install MySQL using yum on Centos7 and achieve remote connection

A brief discussion on HTML table tags

Detailed explanation of the process of installing msf on Linux system

Tutorial on how to install and configure the unzipped version of MySql under Windows 10

How to sort a row or column in mysql

Nginx reverse proxy springboot jar package process analysis

Analysis of problems caused by MySQL case sensitivity

Chinese website user experience rankings

Recommend

How Database SQL SELECT Queries Work

8 commands to effectively manage processes in Linux

SQL implementation of LeetCode (184. The highest salary in the department)

Some common mistakes with MySQL null

How to permanently change the host name in Linux

A brief analysis of Vue's asynchronous update of DOM

Viewing and analyzing MySQL execution status

Detailed explanation of how to manually deploy a remote MySQL database in Linux

Illustration of properties such as offsetWidth, clientWidth, scrollWidth, scrollTop, scrollLeft, etc.

Specific usage instructions for mysql-joins

MySQL database 8 - detailed explanation of the application of functions in the database

CSS3 custom scroll bar style::webkit-scrollbar sample code detailed explanation

Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit

How to create dynamic QML objects in JavaScript

Solution to inserting a form with a blank line above and below