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

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

                          1Next >

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

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

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

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

                          ?#19994;?#38382;题所在,想办法解决:

                          ?#19994;絪ystem/js/Jquery.kc.js,?#19994;?.kc_ajax_show函数,里面有关于提示弹窗的?#38382;?#20877;?#19994;?k_ajaxBg(遮罩层)和#k_ajaxBox(提示弹窗)的css属性,其中相对于top的位置进行修改。

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

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

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

                          连那些不知所以的百?#21462;?60等浏览器都没问题(之前被这两个搞死了,也?#35805;?#27861;,谁让他们也占有一定份额呢)!

                          给实例吧:

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

                          ?#19994;?br />

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

                          替换为

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

                          ?#19994;?/p>

                          $('#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 人气:485 积分:1929 金币:7676
                          最佳新人 灌水狂人
                          浏览器,内核无非就是火狐,谷歌,ie了。其他的都是加了一层皮而已。。

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

                          1Next >

                          发表回复

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

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

                          Copyright © 2004-2015 Focuznet All rights reserved.

                          广州唯众网络科技有限公司 粤ICP备08008106号

                          中奖了! 福建快3遗漏数据

                                                                          竞彩篮球推荐捷报 江西多乐彩开奖查询 百度四川时时 广东11选5精准计划网 甘肃11选5开奖查询 广东福彩36选7开奖号码 浙快乐彩12选5开奖结果 新时时彩代购 牛牛社区福利ac在线播放 足彩胜负彩时比分直播