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

Comment reply pop-up mask effect implementation idea compatible with ie 8/chrome/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

Recommend

Example of using CASE WHEN in MySQL sorting

Preface In a previous project, the CASE WHEN sort...

How to Rename a Group of Files at Once on Linux

In Linux, we usually use the mv command to rename...

A brief introduction to MySQL storage engine

1. MySql Architecture Before introducing the stor...

Learn MySQL execution plan

Table of contents 1. Introduction to the Implemen...

Detailed explanation of the whole process and steps of installing clion on Ubuntu16.04

Explain the whole process of CLion from scratch. ...

MySQL high availability solution MMM (MySQL multi-master replication manager)

1. Introduction to MMM: MMM stands for Multi-Mast...

Web development js string concatenation placeholder and conlose object API detailed explanation

Table of contents Placeholder replacement Console...

Complete steps to upgrade Nginx http to https

The difference between http and https is For some...

Detailed tutorial on installing Docker on CentOS 8.4

Table of contents Preface: System Requirements: I...

How to enable remote access in Docker

Docker daemon socket The Docker daemon can listen...

Detailed explanation of the use of $emit in Vue.js

1. Parent components can use props to pass data t...

Mysql5.7 service cannot be started. Graphical solution tutorial

p>Manually start in "Services" and i...

Detailed explanation of chmod command usage in Linux

chmod Command Syntax This is the correct syntax w...

How to implement import and export mysql database commands under linux

1. Export the database using the mysqldump comman...

How to use Javascript to generate smooth curves

Table of contents Preface Introduction to Bezier ...