bootstrap4.4實現點擊小圖彈出大圖效果,再也不用js的方法了

想要實現點擊小圖彈出大圖的效果現在被廣泛使用的是js技術或者使用jQuery插件，但是有的時候處於特殊需要，並不需要太多花俏的東西，只需要實現點擊彈出大圖這個功能就可以了。

由於bootstrap沒有現成的插件可以直接使用，但是通過簡單的整理還是可以實現的，而且方法比較簡單，最終是效果如下。點擊小圖彈出大圖，點擊彈出的大圖變暗背景的任何地方彈出框會自動關閉，也點擊大圖右上角的關閉按鈕關閉，真實非常強大。

bootstrap點擊小圖彈出大圖效果

上圖使用的bootstrap4.4版本製作出來，在bootstrap3x版本同樣也可以實現，思路和方法完全一樣。

想要實現點擊彈出大圖效果，在bootstrap中有一個叫做modal的東西，使用過的人應該不會陌生，主要用作用戶註冊登錄和填寫評論等功能上，不用刷新網頁，直接在當前頁面上點擊按鈕即可彈出一個窗口，是一個非常友好的設計。

使用bootstrap的modal這個功能主要原因是不想在頁面上引入太多的js代碼，其實也有很多的這類看圖jQuery插件，不過需要的功能比較簡單，殺雞就不用牛了；其次是網站使用bootstrap來做的自適應網頁，無需再考慮其他瀏覽器的兼容性問題。

我要實現的功能是點擊我網頁上的百家號二維碼小圖片，然後彈出一個大的圖片，這樣用戶掃描關注我的時候就不至於因為圖片太小掃描不成功了。

詳細的方法是找到bootstrap的modal，然後選擇一個你喜歡的彈出窗口代碼，然後複製到你的模板文件中，下面是我詳細的代碼，因為網站是使用dedecms系統，所以圖片路徑修改成自己，如果你使用的bootstrap4.4版本下面的代碼直接使用時沒有問題的，如果是低版本的則可能不會生效，按照思路去實現就行。

<ul>

<li data-toggle="modal" data-target=".huo-lg"> <img src="{dede:global.cfg_templets_skin/}/images/huo.jpg" alt="百家號">

<h5>百家號</h5>

<div tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">

<div role="document">

<div>

<div>

<h5 id="exampleModalLongTitle">百度APP掃碼關注</h5>

<button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button></div>

<div> <img src="{dede:global.cfg_templets_skin/}/images/huo.jpg" alt="百家號"> </div></div></div></li>

</ul>

上面代碼中需要注意data-target=".huo-lg"這裡的huo-lg前面是有一個點，不是寫錯了哦。如果想要彈出框變窄一些，那就把lg改為md或sm，上面2個其中圖片的路徑可以不一樣也可以一樣，圖片路徑一樣時原圖最好大一些，要不然彈出來的大圖會比較小，也可以通過css來控制一下圖片的樣式。

上面就是完整的代碼，實現過程不複雜，結合我上面的代碼整合一下就能用了，但是不要忘記引入相關的css和js文件哦，只是想測試一下可以使用相關的cdn，持續分享更多優質內容，歡迎關注。