Click to enlarge the picture of Css combat training

I. Background

A very common feature. Generally, all websites display thumbnails. After you click on the thumbnails, an enlarged picture will be displayed in a pop-up box.

So how is this function implemented? I just learned the basics of CSS, and now I can actually operate it

1. Ideas

First, split the structure of the page:

There is a pop-up window that displays a large image in the pop-up window; and the pop-up window is hidden by default
You can put a lot of pictures on the main page and add a click event
After clicking, the pop-up window is displayed and the large image is displayed
Click on the following image to close the pop-up window

II. Implementation

According to the above description, let's first implement a basic version, first write HTML


<body>

<!-- 先来实现弹窗 -->
<div class='modal' id='modal'>
    <img id='bgImg' />
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img class='thum-img' 
    src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
</div>

</body>

Then it is to add the corresponding style, requiring the modal to be hidden by default, so as follows (in order to better distinguish the pop-up window, the background color and border are added)

<style>
.modal {
    display: none;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: rgb(0, 0, 0, 0.89);
    z-index: 1;
    border: 1px solid rgb(255,255,255,1);
}

.modal>img {
    display: block;
    margin: auto;
    padding: 10%;
    max-width: 60%;
    max-height: 60%;
}

.thum-img {
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}

</style>

The next step is to click to display the logic of the big picture, which is realized with the help of js.

<script>
    var modal = document.getElementById('modal');
    var bgImg = document.getElementById('bgImg');
    var thumImg = document.getElementById('thumImg');
    thumImg.onclick = function() {
        modal.style.display = 'block';
        bgImg.src = this.src;
    }

    bgImg.onclick = function() {
        modal.style.display = 'none';
    }
</script>

After assembling the above implementation into an html, test and view directly, the demonstration effect is as follows

Although the above has achieved our expected results, there are a few points that are not satisfactory

It's not the pop-up window effect we expected, the original image was squeezed out
It would be better if there is an enlarged animation effect in the pop-up window (just use the animation we learned before)
What to do when there are many pictures in the picture strength, click to enlarge

III. Advanced

The first is to hope that the pop-up window is real and does not affect the existing layout. Usually, it is done by setting the position. For example, we can add a layer outside the modal to become

<div style='position:fixed'>
    <div class='modal' id='modal'>
        <img id='bgImg' />
    </div>
</div>

The second is that the style of the pop-up window is too ugly. We can use the border shadow we learned before to achieve a beautiful pop-up effect.

Change to the image to fill the background
Remove background color, add shadow, add white border

The modified css is as follows

.modal {
    display: none;
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
    background-color: white;
}

.modal img {
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

Next consider adding animation, plus a zoom-in effect

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.modal img {
    animation-name: zoom;
    animation-duration: 0.6s;
}

Next, look at the demonstration effect as follows

The next step is to turn this into a general solution to support multiple pictures. This is mainly the modification of the picture click event. You can change the place where the above is written dead.

IV. Source Code

Finally give all the source code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>小灰灰css学习笔记</title> 
<style>
#modal {
	display: none;
}
.modal {
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
}

.modal img {
    animation-name: zoom;
	animation-duration: 0.6s;
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.thum-img {
    float: left;
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}
</style>
	</head>
<body>
<!-- 先来实现弹窗 -->
<div style='position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)' id='modal'>
<div class='modal' id='modalw'>
    <img id='bgImg' />
</div>
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img onclick='showBgImg(this)' class='thum-img' 
    src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
 	<img class='thum-img' src='http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef5e886d03f1faaf51f3de666d.jpg' onclick='showBgImg(this)'/> 
    <img class='thum-img' src='http://g.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcb747b4a5cb2096b63f624a845.jpg' onclick='showBgImg(this)'/>
    <img class='thum-img' src='http://c.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d6657856e70c0828381f30fd14.jpg' onclick='showBgImg(this)'/>
    <img class='thum-img' src='https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png' onclick='showBgImg(this)'/>
</div>

<script>
    var modal = document.getElementById('modal');
    var bgImg = document.getElementById('bgImg');


    function showBgImg(e) {
		modal.style.display = 'block';
		bgImg.src = e.src;
	}

	bgImg.onclick = function() {
		modal.style.display = 'none';
	}
</script>
</body>
</html>

V. Other

Personal blog: a gray blog

A personal blog based on hexo + github pages, recording all blog posts in study and work, welcome to visit

statement

It is not as good as a letter of faith, the content has been posted, it is purely the opinion of the family, because of my average ability and limited knowledge, if you find bugs or have better suggestions, you are always welcome to criticize and correct

Weibo address: Xiaohuihui Blog
QQ: A gray gray / 3302797840

Scan attention

QrCode