天天看点

ie6(或者其他浏览器)使用dialog弹框访问(交互数据)服务器失败(artdialog -v5.0.4)

       在网页开发中,网页弹框用于提示或者和用户交互是必要之一,方便用户使用和提高用户的体验。可弹框实现有多种办法,可是“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详细讲述使用用法(各种样式)和更新内容。

     在

     中,讲述了各个版本更新比较。

最终实现效果图(弹框颜色可自定义,文最后解释):--->图片显示不清,可保存查看!

ie6(或者其他浏览器)使用dialog弹框访问(交互数据)服务器失败(artdialog -v5.0.4)

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,进行了合并,完成了

ie6(或者其他浏览器)使用dialog弹框访问(交互数据)服务器失败(artdialog -v5.0.4)

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,所以无效,只要有都为黑色实心框。效果图:

ie6(或者其他浏览器)使用dialog弹框访问(交互数据)服务器失败(artdialog -v5.0.4)

代码:

 上行css代码为为artdialog添加透明度.6的的粉红色阴影。

继续阅读