点击查看图片---弹窗直接显示图片并带关闭按钮

来源:互联网 发布:java迭代器遍历vector 编辑:程序博客网 时间:2024/06/05 04:20

做项目,有时候查看图片要直接跳转到一个新的页面,在显示图片。这样用户体验效果不好。
采用该方法,直接在当前页面分层弹窗并显示图片,体验效果大大提升!

采用Magnific Popup – 响应式 jQuery Lightbox 插件,就可实现该功能。


html代码:

<a href="{$vo.img}" class="test-popup-link">查看图片</a>

js代码:

// 查看图片$('.test-popup-link').magnificPopup({    type: 'image'});

文件引入:

<link rel="stylesheet" href="/merchant/css/magnific-popup.css"/>
<script type="text/javascript" src="/merchant/js/jquery.magnific-popup.min.js"></script>


原创粉丝点击