HTML pop-up transparent layer instance size can be set and can be proportional

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">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>LIGHTBOX EXAMPLE</title>
<style>
* {
margin:0;
padding:0
}
html, body {
height: 100%;
width: 100%;
font-size:12px
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
padding: 6px 16px;
border: 12px solid #D6E9F1;
background-color: white;
z-index:1002;
overflow:auto;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#f5f5f5;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.close {
float:right;
clear:both;
width:100%;
text-align:right;
margin:0 0 6px 0
}
.close a {
color:#333;
text-decoration:none;
font-size:14px;
font-weight:700
}
.con {
text-indent:1.5pc;
line-height:21px
}
</style>
<script>
function show(tag){
var light = document.getElementById(tag);
var fade = document.getElementById('fade');
light.style.display='block';
fade.style.display='block';
}
function hide(tag){
var light = document.getElementById(tag);
var fade = document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('light')">Open 1</a>
<a href="javascript:void(0)" onclick="show('light2')">Open 2</a>
<div id="light" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light')"> Close</a></div>
<div class="con">
Content 1 Content content ...
</div>
</div>
<div id="light2" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light2')"> Close</a></div>
<div class="con">
Content 2
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

The code is all above, you can copy it and try it... The size of the pop-up layer can be set and can also be proportional

<<: SQL implementation of LeetCode (183. Customers who have never placed an order)

>>: Detailed explanation of :key in VUE v-for

How to view available network interfaces in Linux

HTML pop-up transparent layer instance size can be set and can be proportional

How to view available network interfaces in Linux

Implementation code for using CSS text-emphasis to emphasize text

MySQL 8.0 New Features: Hash Join

js uses the reduce method to make your code more elegant

Detailed explanation of the use of CSS pointer-events attribute

Summary of Linux commands commonly used in work

jQuery plugin to implement minesweeper game (1)

Use of CSS3's focus-within selector

Detailed explanation of Nest.js parameter validation and custom return data format

Linux command line quick tips: How to locate a file

Recommend

How to try to add sticky effect to your CSS

A brief discussion on the efficiency of MySQL subquery union and in

Detailed explanation of how to find the location of the nginx configuration file

Tutorial on how to modify the root password in MySQL 5.7

CSS implements the function of hiding the search box (animation forward and reverse sequence)

How to install and configure MySQL and change the root password

Mysql multiplication and division precision inconsistency problem (four decimal places after division)

Restart the Docker service to apply the automatic start and stop command (recommended)

Set IE8 to use IE7 style code

Analysis of the difference between HTML relative path and absolute path

How to install and configure MySQL 8.0.12 decompressed version under Windows 10 with graphic tutorials

Docker container custom hosts network access operation

Get a list of your top 10 most frequently used terminal commands in Linux

Detailed explanation of the encapsulation and use of the Vue image magnifier component

Introduction to the role of HTML doctype