JS實現圖片點擊后出現模態框效果

2019-01-07

編程之家

https://www.jb51.cc

編程之家收集整理的這篇文章主要介紹了JS實現圖片點擊后出現模態框效果，編程之家小編覺得挺不錯的，現在分享給大家，也給大家做個參考。

很多時候我們在瀏覽圖片時，會發現點擊圖片后，會彈出一個被點擊圖片的放大圖片浮在頁面上，占滿整個窗口。這就是圖片模態框效果。

這個效果可以使用某些js庫實現，如bpopupJs。但是在這里我們使用純js實現，能夠更好理解效果原理和實現方法。

一.實現思路

我們點擊小圖片之后,圖片模態框出現，同時圖片模態框上有一個關閉按鈕和圖片的標題。

因此，我們的實現思路就是：

圖片模態框有大圖片，關閉按鈕，圖片標題三部分。

將圖片模態框隱藏，在點擊小圖片之后，模態框出現。

點擊關閉按鈕后，模態框隱藏。

首先，我們的原始頁面上有一個圖片如下：

圖片點擊彈出模態框效果

圖片模態框很不錯，是個值得學習的效果

模態框的HTML代碼如下：

三.css代碼

我們需要通過css設置模態框中各元素的表現效果同時將其隱藏起來，具體有如下幾步：

1.模態框

頁面圖層之上*/

}

2.關閉按鈕

3.模態框中圖片

圖片表現為塊*/

margin:25px auto;/*圖片居中對齊*/

width: 60%;

max-width: 750px;/*自適應布局*/

}

以上就是基本的模態框各元素的css代碼，如果想實現點擊后擴大的動畫效果，可以增加以下代碼：

通過以上步驟，我們已經制作好了模態框頁面。在使用js來完成交互效果就可以了。

四.js代碼

js代碼主要是圖片和關閉按鈕的點擊交互，需要注意的是js代碼須位于模態框HTML代碼之后，js具體代碼如下，：

通過以上步驟，圖片的模態框效果就實現了，

最后總的代碼如下：

close

圖片點擊彈出模態框效果

圖片模態框很不錯，是個值得學習的效果

以上所述是小編給大家介紹的JS實現圖片點擊后出現模態框效果。編程之家 jb51.cc 收集整理的教程希望能對你有所幫助，如果覺得編程之家不錯，可分享給好友！感謝支持。

總結

以上是編程之家為你收集整理的JS實現圖片點擊后出現模態框效果全部內容，希望文章能夠幫你解決JS實現圖片點擊后出現模態框效果所遇到的程序開發問題。

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。