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

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

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

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


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>


你可能感兴趣的:(前端页面交互)