js 根据静态图片地址,对应当前页做个弹框展示
时间: 2023-07-28 22:39:33 浏览: 44
好的,我可以给你提供一个简单的实现方式。
首先,你需要在页面中引入 jQuery 库和一个用于弹框展示的插件,比如 Magnific Popup。
然后,你可以在页面中添加一个用于展示图片的元素,比如一个 div,设置其样式为 display:none,如下所示:
```html
<div id="image-popup" style="display:none;">
<img src="">
</div>
```
接下来,你需要编写 JavaScript 代码来实现点击图片后弹出弹框的功能。代码如下:
```javascript
// 点击图片时弹出弹框
$('img').on('click', function() {
// 获取当前图片的地址和所在页面的地址
var imageUrl = $(this).attr('src');
var pageUrl = window.location.href;
// 根据页面地址拼接出静态图片地址对应的弹框展示地址
var popupUrl = '/popup?image=' + imageUrl + '&page=' + pageUrl;
// 调用 Magnific Popup 插件展示弹框
$.magnificPopup.open({
items: {
src: popupUrl
},
type: 'iframe'
});
});
```
以上代码中,我们使用 jQuery 监听了图片的点击事件,获取了图片地址和页面地址,并根据这两个参数拼接出一个弹框展示地址,最后调用 Magnific Popup 插件展示弹框。
需要注意的是,这里我们使用了一个 iframe 类型的弹框,可以在弹框中展示一个页面,这样我们就可以在弹框中展示静态图片了。