巅峰霸主 > 设计开发 > bootstrap技术分享 >

bootstrap4.4实现点击图片弹出大图效果代码

时间:2020-03-14 11:48:55  来源:巅峰霸主  作者:烈火大地 点击:
摘要:bootstrap默认是没有点击弹出大图效果的,但是可以借助bootstrap提供modal啦实现,不再使用第三方js插件也可以实现了,这是完整的示例,点击图片看看是不是很美观……

bootstrap虽然没有提供可以直接点击图片弹出大图效果的功能,其实这个完全可以根据modal来实现,最重要的是效果非常,不需要考虑浏览器的兼容性,浏览器版本是否支持等问题,只要效果出来,支持bootstrap的浏览器上都可以,减少了很多的工作量。

代码如下,演示代码是本地电脑上使用的dedecms系统,需要测试的话要修改图片的路径:

<div class="container bg-white my-3 shadow-sm">
  <div class="row">
    <h4 class="col-12">关注站长自媒体<small> 获取更多优质内容</small></h4>
    <ul class="list-inline mx-auto">
      <li class="list-inline-item" data-toggle="modal" data-target=".bd-example-modal-sm"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_baijia.png" alt="百家号" class="img-fluid zmt">
        <h5 class="text-center">百家号</h5>
        <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">百度APP扫码关注</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-content"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_baijia.png" alt="百家号" class="img-fluid"> </div>
          </div>
        </div>
      </li>
      <li class="list-inline-item" data-toggle="modal" data-target=".toutiao-sm"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_toutiao.jpg" alt="头条号" class="img-fluid mx-md-3 zmt">
        <h5 class="text-center">头条号</h5>
        <div class="modal fade toutiao-sm" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">今日头条扫码关注</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-content"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_toutiao.jpg" alt="头条号" class="img-fluid mx-md-3"> </div>
          </div>
        </div>
      </li>
      <li class="list-inline-item" data-toggle="modal" data-target=".qiehao-sm"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_qiehao.png" alt="企鹅号" class="img-fluid zmt">
        <h5 class="text-center">企鹅号</h5>
        <div class="modal fade qiehao-sm" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">QQ|微信扫码关注企鹅号</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-content"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_qiehao.png" alt="企鹅号" class="img-fluid"> </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

把图片路径修改一下就可以了,注意不要忘记引入bootstrap的css和JS文件,否则无法运行哦。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部