K9 通用版 博客版 主題版 地方門戶版 企業版 |   企業(ASP) 分類 使用 分享 疑問 模板 建議 幫助 錯誤 其他
+新建主題 [Ajax]
填寫帳號密碼即可完成注冊
+新建話題 最新回復排序 最新主題排序 精華帖子

關于彈窗提示遮罩層位置不同瀏覽器兼容解決的小經驗

1Next >

toymen 發表于:13-09-05 11:06 [添加收藏] 樓主 [回復] #Top#
toymen 人氣:518 積分:3458 金幣:23864
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 人氣:487 積分:1932 金幣:7830
最佳新人 灌水狂人
瀏覽器,內核無非就是火狐,谷歌,ie了。其他的都是加了一層皮而已。。

個人建議,僅供參考。。
yuxinpop 發表于:13-09-06 12:31 4樓 [回復] #Top#
yuxinpop 人氣:138 積分:69 金幣:8627
最佳新人
已經修復,多謝!
freecms 發表于:17-05-11 16:33 5樓 [回復] #Top#
freecms 人氣:0 積分:65 金幣:20
過來學習一下

1Next >

發表回復

帳號 匿名發布 審核后可見 [加載完整在線編輯器]
內容
驗證碼
KingCMS 內容管理系統

關于我們 聯系我們 廣告報價 付款方式 站點導航

Copyright © 2004-2015 Focuznet All rights reserved.

廣州唯眾網絡科技有限公司 粵ICP備08008106號

半全场开奖查询