欢迎光临 Rick 's BLOG
日志首页  | C# .Net编程  | 原创作品  | 生活点滴  | C\C++相关  | 多媒体相关※ERMP  | VB相关  | 其它运维与编程  |  留言簿
安全、杀毒软件厂商误报提交方法大全 取消Windows资源管理器左侧树中显示的压缩文件
未知  使用Layer实现图片弹窗,并解决垂直居中的问题
[ 发布日期:12个月前 (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
            
}]
        },
        
anim5
    
});



引用通告地址 (0):
复制引用地址https://www.rickw.cn/trackback/295
复制引用地址https://www.rickw.cn/trackback/295/GBK
[ 分类:其它运维与编程  | 查看:599 ]

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

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