在前端開(kāi)發(fā)中，經(jīng)常使用到彈窗來(lái)展示一些信息或者提示用戶。而CSS彈窗居中顯示圖片是其中的一種常見(jiàn)需求，接下來(lái)我們就來(lái)了解一下如何實(shí)現(xiàn)這個(gè)功能。
首先，在HTML文件中創(chuàng)建一個(gè)
元素作為彈窗容器，再在其內(nèi)部添加一個(gè)![]()
元素，用于顯示所需圖片。
<div class="modal"> <img src="your_image.jpg" alt="Image"> </div>
接下來(lái)，就是使用CSS來(lái)實(shí)現(xiàn)彈窗居中顯示圖片的效果了。首先，需要設(shè)置
元素的寬度、高度以及邊框?qū)傩?，通過(guò)設(shè)置邊框來(lái)增強(qiáng)彈窗的樣式。同時(shí)，為了讓彈窗布滿整個(gè)屏幕，需要設(shè)置其position為fixed，然后將其top和left屬性設(shè)置為0，即可以將其置于屏幕頂部左側(cè)。
接著，需要將元素設(shè)置為絕對(duì)定位，并設(shè)置其top和left屬性為50%。這樣只是讓圖片處于頁(yè)面的中間位置，接下來(lái)還需要通過(guò)負(fù)的外邊距值將其向左和向上移動(dòng)半個(gè)圖片的寬度和高度，才能實(shí)現(xiàn)完全居中。
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 5px solid #000;
box-sizing: border-box;
}
.modal img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}最后，需要在JavaScript中為
元素添加事件，使其在點(diǎn)擊時(shí)顯示彈窗，再添加一個(gè)按鈕或者其他元素，用于關(guān)閉彈窗時(shí)隱藏其。
至此，我們已經(jīng)完成了CSS彈窗居中顯示圖片的實(shí)現(xiàn)。通過(guò)以上代碼，我們可以在任何網(wǎng)站上方便地添加一個(gè)彈窗，并將所需圖片完全居中進(jìn)行展示。