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 configure redis sentinel mode in Docker (on multiple servers)

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

How to configure redis sentinel mode in Docker (on multiple servers)

Control the light switch with js

Example code for implementing a QR code scanning box with CSS

When to use Map instead of plain JS objects

Summary of Spring Boot Docker packaging tools

How does MySQL connect to the corresponding client process?

MySQL scheduled full database backup

Detailed explanation of the 4 codes that turn the website black, white and gray

Docker private repository management and deletion of images in local repositories

How to manage users and groups when running Docker

Recommend

A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px

Installation, configuration and use of process daemon supervisor in Linux

How to use Web front-end vector icons

Summary of the switching problem and solution of installing multiple JDK versions in win10 64-bit system

Examples of using provide and inject in Vue2.0/3.0

Basic usage analysis of Explain, a magical tool for MySQL performance optimization

The most detailed installation and configuration of redis in docker (with pictures and text)

Nginx load balancing algorithm and failover analysis

MySQL 8.0.12 decompression version installation graphic tutorial under Windows 10

jQuery implements the bouncing ball game

MySQL installation and configuration tutorial for win10 free installation version

Detailed tutorial on installing phpMyAdmin on Ubuntu 18.04

Vue Element front-end application development dynamic menu and routing association processing

Explain TypeScript enumeration types in detail

Summary of various implementation methods of mysql database backup