K9 通用版 博客版 论坛版 地方门户版 企业版 |   企业(ASP) 分类 使用 分享 疑问 模板 建议 评论 错误 水坊
+新建主题 [Ajax]
填写帐号密码即可完成注册
+新建话题 最新回复排序 最新主题排序 精华帖子

关于弹窗提示遮罩层位置不同浏览器兼容解决的小经验

1Next >

toymen 发表于:13-09-05 11:06 [添加收藏] 楼主 [回复] #Top#
toymen 人气:517 积分:3448 金币:23692
KC元老

KC-php系统有不少基于AJAX的弹窗提示(带遮罩层),但原程序对于基于不同内核的浏览器兼容性不太好,比如谷歌浏览器,提示层永远在网页的顶端,而不是当前可见区域,这样,长网页就会出现有提示看不见,网页“死掉”。

BD一下,发现是Chrome对于document.documentElement.scrollTop不兼容造成的,解决方案是用document.body.scrollTop来判断。

但是用document.body.scrollTop又遭遇IE内核的不兼容,郁闷~

找到问题所在,想办法解决:

找到system/js/Jquery.kc.js,找到$.kc_ajax_show函数,里面有关于提示弹窗的参数,再找到#k_ajaxBg(遮罩层)和#k_ajaxBox(提示弹窗)的css属性,其中相对于top的位置进行修改。

试过document.body.scrollTop || document.documentElement.scrollTop这样的格式,遮罩层的位置解决了,但是#k_ajaxBox(提示弹窗)的位置因为含有运算公式,无法解决。

后来发现,对于不同浏览器,document.body.scrollTop或者 document.documentElement.scrollTop总有一个值为0;于是琢磨用两值相加也许能解决问题。

尝试,解决,兼容性非常好!

连那些不知所以的百度、360等浏览器都没问题(之前被这两个搞死了,也没办法,谁让他们也占有一定份额呢)!

给实例吧:

打开system/js/Jquery.kc.js,

找到

$('#k_ajaxBg').css({
'top':document.documentElement.scrollTop,

替换为

$('#k_ajaxBg').css({
'top':document.documentElement.scrollTop+document.body.scrollTop,

找到

$('#k_ajaxBox').css({   里的

        'top':document.documentElement.scrollTop+((h-nHeight)/2)

替换为

       'top':document.body.scrollTop+document.documentElement.scrollTop+((h-nHeight)/2)


luke 发表于:13-09-05 13:04 沙发 [回复] #Top#
luke 人气:476 积分:1931 金币:6938
最佳新人 灌水狂人
浏览器,内核无非就是火狐,谷歌,ie了。其他的都是加了一层皮而已。。

个人建议,仅供参考。。
yuxinpop 发表于:13-09-06 12:31 4楼 [回复] #Top#
yuxinpop 人气:136 积分:39 金币:7909
最佳新人
已经修复,多谢!
freecms 发表于:17-05-11 16:33 5楼 [回复] #Top#
freecms 人气:0 积分:65 金币:20
过来学习一下

1Next >

发表回复

帐号 匿名发布 审核后可见 [加载完整在线编辑器]
内容
验证码
KingCMS 内容管理系统

关于我们 联系我们 广告报价 付款方式 站点导航

Copyright © 2004-2015 Focuznet All rights reserved.

粤ICP备08008106号