在網頁開發中,網頁彈框用于提示或者和使用者互動是必要之一,友善使用者使用和提高使用者的體驗。可彈框實作有多種辦法,可是“jquery.ui.dialog.js”實作的彈框,在ie6或者使用專用網絡或者用類似浏覽器軟體(本質是浏覽器)通路伺服器,可能導緻用戶端正确通路(發送和接受資料異常[null])伺服器失敗。
後來調查原因發現是專用網絡(url)或者用類似浏覽器軟體,導緻dialog彈框送出資料失敗。歸根到底,就是因為,這些和dialog不相容,那麼去修改dialog還是???。
解決問題,要麼在之前基礎上修改直到ok,要麼用新的實作方式替代之前的(也就是,遇到問題有的時候解決還不如放棄之前,重新做一個呢)。
最終,發現了新的dialog實習方式,替代了jqueryui實作的dialog,它就是artdialog,可是這個artdialog版本之間的差異很大,提供了很大的版本和css樣式
(此處使用artdialog -v5.0.4版本):
artdialog各個版本的下載下傳位址(可以選擇branch下拉框,選擇版本):
每個版本之間都有好多事例,并且index.html詳細講述使用用法(各種樣式)和更新内容。
在
中,講述了各個版本更新比較。
最終實作效果圖(彈框顔色可自定義,文最後解釋):--->圖檔顯示不清,可儲存檢視!
artdialog的使用:
1.在頁面 head 引入 artdialog 樣式與腳本檔案:
注:css樣式(自己選擇,也可做相應的修改),artdialog的js導入,在生産模式下,應該導入artdialog.min.js和artdialog.plugins.min.js或jquery.artdialog.min.js(此min隻有代碼,沒有代碼書寫格式和整理,沒有注釋,節省空間)。
2.在js代碼中,實作artdialog彈框顯示:
注:最簡單的彈框代碼就是:
3:實作後,為了相容ie6和其他浏覽器,對代碼做了相應的修改:
問題:[1]: ie6下select層,沒有被覆寫,也沒被鎖定,和artdialog鎖定背景色不一緻。
[2]: 并且在有些浏覽器下有artdialog的盒子黑框。
解決[1]:在js中,加入,對select下拉框手動鎖定和改變背景顔色:
但在esc退出和關閉“x”按鈕的時候,背景色不傳回,則,調用方法解決:
上canceldialog()方法,在點下“[确認]”、"[取消]"、esc鍵按下,“x”按下使用都要調用(前兩者都在上面artdialog代碼中實作,後兩者如下):
修改artdialog.js:
artdialog實作,就是一段html的table+css代碼是相對的:
代碼中,在23行,“x”連結按鈕中,加入“ onclick="canceldialog();" ”來實作。
esc鍵鍵盤輸入碼為"27",将代碼:
修改成為:
注:最終,可實作,artdialog覆寫select(視覺效果)。但在ie6下由于層覆寫原因,div覆寫iframe覆寫select,select在artdialog層之上,并未解決!!!。
css樣式:
通過各種skins下css的對比,都有點不一樣,都不是我想要的,但我所要的各css都有點,是以對chrome.css 和twitter.css 和default.css,進行了合并,完成了
css代碼:
上邊,重要解析:
上此行css代碼,為覆寫頁面的背景色和透明度(此處為灰色的#e0e0e0)。
上此行css代碼,artdialog框體的主背景。(此處為亮藍色#6698fe,rgb(101, 153, 254);),由于做了ie6相容,是以rgba的a和filter:alpha(opacity=70); opacity:.7;的透明度,去除了!
上此行代碼為artdialog的内容中的背景色(此處為白色rgb(255, 255, 255);)和字型大小(其他樣式可自定義);
上此行css在firefox和chrome頭和腳的顔色不顯示解決(好像有點機率性,暫無解決)
上此行為滑鼠移上“x”關閉連接配接和按鈕時候觸發的變紅效果(此處為#c72015)
上此行代碼向artdialog彈框添加一個陰影特效,也是在ie6下的那個黑色邊框的原因,但ie6不支援box-shadow,是以無效,隻要有都為黑色實心框。效果圖:
代碼:
上行css代碼為為artdialog添加透明度.6的的粉紅色陰影。