JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果

2019-01-07

編程之家

https://www.jb51.cc

編程之家收集整理的這篇文章主要介紹了JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果，編程之家小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

很多時(shí)候我們?cè)跒g覽圖片時(shí)，會(huì)發(fā)現(xiàn)點(diǎn)擊圖片后，會(huì)彈出一個(gè)被點(diǎn)擊圖片的放大圖片浮在頁(yè)面上，占滿(mǎn)整個(gè)窗口。這就是圖片模態(tài)框效果。

這個(gè)效果可以使用某些js庫(kù)實(shí)現(xiàn)，如bpopupJs。但是在這里我們使用純js實(shí)現(xiàn)，能夠更好理解效果原理和實(shí)現(xiàn)方法。

一.實(shí)現(xiàn)思路

我們點(diǎn)擊小圖片之后,圖片模態(tài)框出現(xiàn)，同時(shí)圖片模態(tài)框上有一個(gè)關(guān)閉按鈕和圖片的標(biāo)題。

因此，我們的實(shí)現(xiàn)思路就是：

圖片模態(tài)框有大圖片，關(guān)閉按鈕，圖片標(biāo)題三部分。

將圖片模態(tài)框隱藏，在點(diǎn)擊小圖片之后，模態(tài)框出現(xiàn)。

點(diǎn)擊關(guān)閉按鈕后，模態(tài)框隱藏。

首先，我們的原始頁(yè)面上有一個(gè)圖片如下：

圖片點(diǎn)擊彈出模態(tài)框效果

圖片模態(tài)框很不錯(cuò)，是個(gè)值得學(xué)習(xí)的效果

模態(tài)框的HTML代碼如下：

三.css代碼

我們需要通過(guò)css設(shè)置模態(tài)框中各元素的表現(xiàn)效果同時(shí)將其隱藏起來(lái)，具體有如下幾步：

1.模態(tài)框

頁(yè)面圖層之上*/

}

2.關(guān)閉按鈕

3.模態(tài)框中圖片

圖片表現(xiàn)為塊*/

margin:25px auto;/*圖片居中對(duì)齊*/

width: 60%;

max-width: 750px;/*自適應(yīng)布局*/

}

以上就是基本的模態(tài)框各元素的css代碼，如果想實(shí)現(xiàn)點(diǎn)擊后擴(kuò)大的動(dòng)畫(huà)效果，可以增加以下代碼：

通過(guò)以上步驟，我們已經(jīng)制作好了模態(tài)框頁(yè)面。在使用js來(lái)完成交互效果就可以了。

四.js代碼

js代碼主要是圖片和關(guān)閉按鈕的點(diǎn)擊交互，需要注意的是js代碼須位于模態(tài)框HTML代碼之后，js具體代碼如下，：

通過(guò)以上步驟，圖片的模態(tài)框效果就實(shí)現(xiàn)了，

最后總的代碼如下：

close

圖片點(diǎn)擊彈出模態(tài)框效果

圖片模態(tài)框很不錯(cuò)，是個(gè)值得學(xué)習(xí)的效果

以上所述是小編給大家介紹的JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果。編程之家 jb51.cc 收集整理的教程希望能對(duì)你有所幫助，如果覺(jué)得編程之家不錯(cuò)，可分享給好友！感謝支持。

總結(jié)

以上是編程之家為你收集整理的JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果全部?jī)?nèi)容，希望文章能夠幫你解決JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果所遇到的程序開(kāi)發(fā)問(wèn)題。

如果覺(jué)得編程之家網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將編程之家網(wǎng)站推薦給程序員好友。

本圖文內(nèi)容來(lái)源于網(wǎng)友網(wǎng)絡(luò)收集整理提供，作為學(xué)習(xí)參考使用，版權(quán)屬于原作者。

小編個(gè)人微信號(hào) jb51ccc

喜歡與人分享編程技術(shù)與工作經(jīng)驗(yàn)，歡迎加入編程之家官方交流群！

總結(jié)

以上是生活随笔為你收集整理的html点击图片弹出模态框,JS实现图片点击后出现模态框效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。