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

最新推荐文章于 2023-12-20 10:56:45 发布
最新推荐文章于 2023-12-20 10:56:45 发布
阅读量2w 收藏 8
点赞数 2
分类专栏： 前端页面交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38852289/article/details/78716521
版权
本文介绍如何在项目中改善用户查看图片的体验，避免跳转新页面，而是利用Magnific Popup这个响应式的jQuery Lightbox插件，实现在当前页面弹窗显示图片并带有关闭按钮的功能。
摘要由CSDN通过智能技术生成

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

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


html代码：

<
最低0.47元/天 解锁文章
战之殇
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html H5 dialog弹窗学习，实现弹窗显示内容 替代confirm、alert
qq445829096的博客
07-09 835
html H5 dialog弹窗学习，实现弹窗显示内容 替代confirm、alert
自动弹图片关闭按钮html,点击弹出带关闭按钮的窗口特效（兼容所有浏览器）...
weixin_42470438的博客
06-02 1511
弹出页面被大多浏览器拦截，现在多数改为弹出窗口，即通过弹出层来实现，今天中国jquery实现可拖动弹出窗口特效jquery实现可拖动弹出窗口特效-带关闭按钮function popWin(a){function n(){var a=k?k:document.body,b=a.scrollHeight>a.clientHeight?a.scrollHeight:a.clientHeight,c...
HTML 单击图片独立显示放大效果实现方法
热门推荐
sensor_WU 博客
07-10 1万+
介绍原生的HTML中单击图片模式窗体放大的实现方法
div+css弹出层带关闭按钮
09-01
整理div+css弹出层，带关闭按钮供大家参考
.net弹出框预览图片功能实现
bakk0615的博客
04-18 431
我们使用DEV工具 首先在该页面xxx.aspx页面里面注册DEV,写在页面最开始 <%@ Register assembly="DevExpress.Web.v16.2, Version=16.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace=...
鼠标移至a标签，浮动显示图片
qq_37212970的博客
06-03 5113
:hover 选择器用于选择鼠标指针浮动在上面的元素。 提示：:hover 选择器可用于所有元素，不只是链接。 提示：:link选择器设置指向未被访问页面的链接的样式，:visited选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。 注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。 ...
div 居中显示
Pandaxm的专栏
01-06 356
 无标题文档body { margin: 0; padding: 0; text-align: center; background: #fff;} #test { border: 1px solid #000; width: 300px; height: 160px; position: absolute; top: 5
微信小程序点击按钮弹出弹窗_微信小程序带图片弹窗简单实现
weixin_39932181的博客
12-20 3893
怎样实现一个带图片显示的模态视图弹窗呢？有时候我们的确有这个需求，自己实现？不不不，哪有官方的方便！使用官方组件实现图片模态弹窗下面我来介绍一种使用官方组件就能实现的方法：(PS:最近发现一个问题，如果页面内有textarea时，textarea的层级会比蒙版视图高，并且无法修改，做了一个比较笨的解决方案：小程序textarea层级问题)(PS:呃呃呃，听说官方的modal组件即将废弃，所以另写了...
tinymce 多图上传插件，点击弹窗确认按钮自动上传
最新发布
03-01
在“tinymce 多图上传插件，点击弹窗确认按钮自动上传”这个场景下，我们主要讨论的是如何在tinymce编辑器中实现图片的批量上传功能，并在用户点击确认后自动将图片插入到编辑内容中。 首先，我们需要了解tinymce的...
ios-类似qq顶部提醒弹窗.zip
07-11
- 为了提供更灵活的回调机制，`TSRemindView`可能会使用Block来处理用户交互事件，如点击关闭按钮。同时，也可能通过Category扩展`UIView`或`UIViewController`，添加便捷的方法来直接显示或隐藏`TSRemindView`。 ...
JS弹出图片展示效果，有关闭、左右控制按钮和缩略图.rar
07-10
点击网页链接弹出一个图片展示的层效果，在这个层上有关闭按钮，有左右控制按钮和缩略图导航，传入一个json就可以使用，可以当作了JS幻灯来用，带缩略图，带控制按钮，还可以自动播放，功能很强大。使用时点击左上角“打开相册”开始测试。var newPhotoShow=new picShow(pics);这里传入一个json就可以使用 json格式参照html里面的例子。
html弹窗可以关闭,js 点击弹窗以外 关闭弹窗
weixin_34698121的博客
06-27 2470
layer点击自定义按钮关闭对应的弹窗，layer如何关闭弹窗首先自定义一个变量点击 Btn 按钮，弹出弹窗(将弹窗事件赋给自定义的变量名)我是标题一.实现弹窗原理： 弹窗的实现： (1)先写出一个div，弹出窗的样式，然后使用display样式进行隐藏； &nbsp首先创建一个文本，将代码复制粘贴到上面，然后保存。代码：：startstart(空格)cmdgoto(空格...
Html网页打开自动弹出显示内容或图片
小栋哟
05-19 1829
直接复制到要弹出的页面就可。
【ArcGIS教程02】HTML弹窗挂接显示调研照片
m0_67324707的博客
03-16 2267
本方法可对外业现场采集的照片进行整理，通过ArcGIS辅助分析，可应用于外业调研、采集、巡检、执法等工作领域。
带关闭按钮的底部html代码,js实现带关闭按钮始终显示在网页最底部工具条的方法...
weixin_29132813的博客
06-26 412
本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法。分享给大家供大家参考。具体如下：这是一款很实用的代码，给网页加入一个始终显示在浏览器窗口底部的工具栏，可以在上面放上公告，联系人等等信息，此代码的工具条还带有关闭按钮，可以随时关闭固定底(顶)部菜单body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}li{list-...
js点击a标签，打开新窗口预览图片
m0_46088410的博客
08-10 3744
const imgSrc= '图片路径' var el = document.createElement("a"); el.target = "_blank"; el.href = 'http://xxx?spUrl='+imgSrc; $("body").append(el)//将a标签插入页面 el.click()//点击a标签实现跳转 $(el).remove()//移除a标签
html自动弹图片,JS自动适应的图片弹窗实例
weixin_29143339的博客
06-03 1057
/************************************自动适应的图片弹窗*********************************/var autoImg=function(argcs){/*调整图片大小，等比例缩放argcs['maxHeight']=>最大高度,argcs['maxWidth']=>最大宽度,argcs['height']=>图片高...
HTML纯代码给网页增加右下角提示框弹窗提示图片+文字纯HTML代码无需插件
宋佳乐旗下博客
12-20 3309
HTML纯代码给网页增加右下角提示框弹窗提示图片+文字纯HTML代码无需插件。
vue--点击图片放大弹窗的自定义指令（低级版）
05-26
好的，下面是一个简单的点击图片放大弹窗的自定义指令： ```javascript // 引入 Vue import Vue from 'vue' // 定义指令 Vue.directive('enlarge', { bind: function (el) { // 给图片元素绑定点击事件 el.addEventListener('click', function () { // 创建弹窗元素 const dialog = document.createElement('div') dialog.style.position = 'fixed' dialog.style.top = '0' dialog.style.left = '0' dialog.style.width = '100%' dialog.style.height = '100%' dialog.style.backgroundColor = 'rgba(0, 0, 0, 0.5)' dialog.style.display = 'flex' dialog.style.justifyContent = 'center' dialog.style.alignItems = 'center' dialog.style.zIndex = '9999' // 创建弹窗中的图片元素 const img = document.createElement('img') img.src = el.src img.style.maxWidth = '90%' img.style.maxHeight = '90%' img.style.borderRadius = '5px' img.style.boxShadow = '0px 0px 5px #666' // 将图片元素添加到弹窗中 dialog.appendChild(img) // 将弹窗添加到body中 document.body.appendChild(dialog) // 点击弹窗以外的区域关闭弹窗 dialog.addEventListener('click', function (e) { if (e.target === dialog) { document.body.removeChild(dialog) } }) }) } }) ``` 使用方法：在需要放大的图片元素上添加 v-enlarge 指令即可。 ```html <template> <div> <img src="图片地址" v-enlarge> </div> </template> ``` 请注意，这只是一个简单的实现方式，可能存在一些问题，如图片过大时会出现滚动条等。如果需要更完善的功能，可以参考一些开源的图片查看组件，如vue-image-viewer、vue-photo-preview等。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值