bootstrap 點選圖片彈出大圖
阿新 • • 發佈:2019-02-05
效果: 在一個table裡顯示很多的小圖,每點選一個圖片,顯示一張大圖。
- 小圖的html
<td><img height='120px' width='200px' src="{$vo['img']}?imageView2/1/w/200/h/120" onclick="showBigImg('{$vo['img']}')"/></td>
- 圖片的url來自TP的模板替換
- 圖片的末尾的
?imageView2/1/w/200/h/120
是七牛的樣式調整
- 顯示大圖的modal
<!--放大圖的imgModal-->
<div class="modal fade bs-example-modal-lg text-center" id="imgModal"tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
<div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
<div class="modal-content">
<img id="imgInModalID" src="" >
</div>
</div>
</div>
- 以預設大小的 modal 為例,要做改變寬度其實只需要在 .modal-dialog 樣式上做文章就行了。為了簡單,我現在直接寫在元素標籤上了。
關鍵三點:
- 用
display: inline-block;
- 父節點用
text-center
樣式居中; - 重置寬度
width: auto