Use CSS to prevent Lightbox to realize the display of large image code without refreshing when clicking on small image

Use CSS to prevent Lightbox to realize the display of large image code without refreshing when clicking on small image

Use CSS to prevent Lightbox to realize the display of large image code without refreshing when clicking on small image

Code introduction:

CSS's "Lightbox" is a popular image display technology that can display a large image without refreshing when clicking a small image. The Discuz forum has this function, but it seems that it also uses JS. This one does not use JS and is completely implemented with pure CSS. It is also very convenient to use. Please note that the border and size of the image should be set according to your web page layout. This is just a demonstration and may not be exactly suitable for your web page.

Code content:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head>
<title>Use CSS to prevent Lightbox to realize the code of displaying large images without refreshing when clicking small images - www.webdm.cn</title> 
<style> 
.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: white; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 
} 
 .white_content { 
display: none; 
 position: absolute; 
top: 25%; 
left: 25%; 
width: 46%; 
height: 50%; 
padding: 13px; 
border: 16px solid orange; 
background-color: white; 
z-index:1002; 
overflow:auto; 
} 
 .codefans_net
{    
width:420px;
height:210px;
background-color:#efefef;
color:#666;
border-width:1px;
border-color:#999;
border-style:solid;
margin:6px;
padding:6px;
font-Size:14px;
line-height:200%;
float:midden;
    
}
</style> 
</head> 
<body> 
<p class="codefans_net">CSS's "Lightbox" is a popular image display technology that can realize the function of displaying a large image without refreshing when clicking a small image. If you don't quite understand this effect, you can click on the image below and you will understand it! <br>
<a href = "javascript:void(0)" onclick = "document.getElementById

('light').style.display='block';document.getElementById('fade').style.display='block'"><img border="0" 

src="upload/2022/web/demoimgsmall.jpg" width="100" height="62"></a> 
<div id="light" class="white_content">
<a target="_blank" href="/">
<img border="0" src="upload/2022/web/demoimg.jpg" width="350" height="216"></a> <a href = 

"javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById

('fade').style.display='none'">Close</a></div> 
<div id="fade" class="black_overlay"></div></p>
</body> 
</html>
<br />
<p><a href="http://www.webdm.cn">Web Code Station</a> - The most professional web code download!

</p>

Summarize

The above is the code I introduced to you using CSS anti-Lightbox to display the large image without refreshing when clicking the small image. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  The design process of Alibaba's Mid-Autumn Festival logo combined with the website

>>:  Summary of Spring Boot Docker packaging tools

Recommend

A brief discussion on JS regular RegExp object

Table of contents 1. RegExp object 2. Grammar 2.1...

Explanation of the usage scenarios of sql and various nosql databases

SQL is the main trunk. Why do I understand it thi...

Brief analysis of the introduction and basic usage of Promise

Promise is a new solution for asynchronous progra...

MySql 5.7.20 installation and configuration of data and my.ini files

1. First download from the official website of My...

Use Navicate to connect to MySQL on Alibaba Cloud Server

1. First enter the server's mysql to modify p...

About the difference between inspecting elements and viewing the source code of a web page

I don’t know if you have noticed that when we ope...

Description of the execution mechanisms of static pages and dynamic pages

1. A static page means that there are only HTML ta...

jQuery implements ad display and hide animation

We often see ads appear after a few seconds and t...

Nginx+FastDFS to build an image server

Installation Environment Centos Environment Depen...

A brief analysis of the count tracking of a request in nginx

First, let me explain the application method. The...

Let's talk about the LIMIT statement in MySQL in detail

Table of contents question Server layer and stora...

How to install docker on Linux system and log in to docker container through ssh

Note: I use Centos to install docker Step 1: Inst...

A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

XML/HTML CodeCopy content to clipboard < butto...

Detailed installation steps for MySQL 8.0.11

This article shares the installation steps of MyS...

Nginx uses ctx to realize data sharing and context modification functions

Environment: init_worker_by_lua, set_by_lua, rewr...