欢迎光临 Rick 's BLOG
日志首页  | C# .Net编程  | 原创作品  | 生活点滴  | C\C++相关  | 多媒体相关※ERMP  | VB相关  | 其它运维与编程  |  留言簿
安全、杀毒软件厂商误报提交方法大全 取消Windows资源管理器左侧树中显示的压缩文件
未知  使用Layer实现图片弹窗,并解决垂直居中的问题
[ 发布日期:3年前 (2023-12-07) ]   [ 来自:本站原创 ] [分类:其它运维与编程]
当页面有有垂直滚动条时,弹窗的垂直居中不正确。
它是按页面的总高度居中显示的。没有计算滚动条位置。
我们期望的结果是让弹窗在当前可视区居中显示。

在网上查询了一下,解决方案,在我这边测试有效的方案如下:
解决方法一:
将网页声明为 HTML5。在页面第一行增加 <!doctype html>
注意,需要测试你的页面是否完全兼容HTML5,如果不兼容可能会存在布局显示异常。

方案二:
给Body增加一个样式,设置Body的高度为100%
<body style="height:100%;">


Layer弹窗显示图片的js代码:
[复制到剪贴板]
function showImage(imgsrc){    
layer.photos({
photos:{
"title": "查看图片",
"id": 1,
"start":0,
"data":[
{
"alt": '',
"pid": 0,
"src": imgsrc,
"thumb": imgsrc
}]
},
anim: 5
});

}
?>
如果文章对您有帮助,给个赞赏吧!
引用通告地址 (0):
复制引用地址https://www.rickw.cn/trackback/295
复制引用地址https://www.rickw.cn/trackback/295/GBK
[ 分类:其它运维与编程  | 查看:1762 ]

暂时没有评论,快来发表一个评论吧。
发表评论
作者:   用户:[访客] 
评论:

表  情
禁止表情 | 禁止UBB | 禁止图片 | 识别链接
对不起,你没有权限上传附件!
验证:
 
PoweredBy R-Blog V1.00 © 2004-2026 WWW.RICKW.CN, Processed in second(s) , 7 queries    京ICP备17058477号-5