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! |
<<: The design process of Alibaba's Mid-Autumn Festival logo combined with the website
>>: Summary of Spring Boot Docker packaging tools
Recommend
HTML table markup tutorial (40): Dark border color attribute of the header BORDERCOLORDARK
In the table header, you can define the dark bord...
Introduction to the steps of deploying redis in docker container
Table of contents 1 redis configuration file 2 Do...
How familiar are you with pure HTML tags?
The following HTML tags basically include all exis...
How to deploy stand-alone Pulsar and clustered Redis using Docker (development artifact)
Table of contents 1. Introduction: 2. Docker: 1 C...
How to configure VMware virtual machine NAT mode
This article describes the VMware virtual machine...
A brief analysis of the usage of USING and HAVING in MySQL
This article uses examples to illustrate the usag...
A brief introduction to Vue filters, lifecycle functions and vue-resource
1. Filter Example: <!DOCTYPE html> <html...
Detailed example of locating and optimizing slow query sql in MySQL
Table of contents 1. How to locate and optimize s...
Vue+element+oss realizes front-end fragment upload and breakpoint resume
Pure front-end implementation:切片上傳斷點續傳.斷點續傳needs ...
How to implement input checkbox to expand the click range
XML/HTML CodeCopy content to clipboard < div s...
Solution to the problem that VMware workstation pro cannot be opened due to win10 update
I encountered a problem when I turned on my lapto...
Some key points of website visual design
From handicraft design to graphic design to web de...
Solve the scroll-view line break problem of WeChat applet
Today, when I was writing a small program, I used...
Detailed explanation of mkdir command in Linux learning
Table of contents Preface 1. Basic knowledge of f...
Example of converting webpack images to base64
Download url-loader yarn add -D url-loader module...