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

开发者社区> tony~tian> 正文

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

简介:        在网页开发中,网页弹框用于提示或者和用户交互是必要之一,方便用户使用和提高用户的体验。可弹框实现有多种办法,可是“jquery.ui.dialog.js”实现的弹框,在ie6或者使用专用网络或者用类似浏览器软件(本质是浏览器)访问服务器,可能导致客户端正确访问(发送和接受数据异常[null])服务器失败。        后来调查原因发现是专用网络(url)或者用类似浏览器软
+关注继续查看

       在网页开发中,网页弹框用于提示或者和用户交互是必要之一,方便用户使用和提高用户的体验。可弹框实现有多种办法,可是“jquery.ui.dialog.js”实现的弹框,在ie6或者使用专用网络或者用类似浏览器软件(本质是浏览器)访问服务器,可能导致客户端正确访问(发送和接受数据异常[null])服务器失败。

       后来调查原因发现是专用网络(url)或者用类似浏览器软件,导致dialog弹框提交数据失败。归根到底,就是因为,这些和dialog不兼容,那么去修改dialog还是???。

       解决问题,要么在之前基础上修改直到ok,要么用新的实现方式替代之前的(也就是,遇到问题有的时候解决还不如放弃之前,重新做一个呢)。   

       最终,发现了新的dialog实习方式,替代了jQueryUI实现的dialog,它就是artdialog,可是这个artdialog版本之间的差异很大,提供了很大的版本和css样式

(此处使用artdialog -v5.0.4版本):

       兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

      artdialog各个版本的下载地址(可以选择branch下拉框,选择版本):

      https://github.com/aui/artDialog   

      http://code.google.com/p/artdialog/   (老版本)

     每个版本之间都有好多事例,并且index.html详细讲述使用用法(各种样式)和更新内容。

     在

     https://github.com/aui/artDialog/blob/5.0.4/README.md

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

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

 

artdialog的使用:

1.在页面 head 引入 artDialog 样式与脚本文件:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/artDialog-5.0.4/skins/default.css" />
<script type="text/javascript"  src="${pageContext.request.contextPath }/artDialog-5.0.4/source/artDialog.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath }/artDialog-5.0.4/source/artDialog.plugins.js"></script>

      注:css样式(自己选择,也可做相应的修改),artdialog的js导入,在生产模式下,应该导入artDialog.min.js和artDialog.plugins.min.js或jquery.artDialog.min.js(此min只有代码,没有代码书写格式和整理,没有注释,节省空间)。

2.在js代码中,实现artdialog弹框显示:  

function getDialog(showMsg,callback){
	art.dialog({
	id: 'artdialoggg',
	lock:true,
//	height:350,  //auto,让内容自控制
//	width:400,
	title: '信息确认页',
	content: showMsg,
	initialize:function(){
	  setTableBgColor("userinfoshow");
	},
	button:[
        	{
        		value:'[确认]',
        		callback: function(){
        			this .dialog = close;
//		        	this.close();
        			cancelDialog();
        			callback();
        		}
        	},
        	{
        		value:'[取消]',
        		callback:function(){
        			this .dialog = close;
        			cancelDialog();
        		}
        	}
		        ]
	});
	$("#character").attr("disabled",true);
	$("#character").css("background-color","#E0E0E0");
}

 注:最简单的弹框代码就是:

	art.dialog({
	id: 'artdialoggg',
	lock:true,
	height:350,制
	width:400,
	title: '信息确认页',
	content: '我是内容已确认过了!',
	button:[
        	{
        		value:'[确认]',
        		callback: function(){
        			this .dialog = close;
        		}
        	},
        	{
        		value:'[取消]',
        		callback:function(){
        			this .dialog = close;

        		}
        	}
		        ]
	});

3:实现后,为了兼容ie6和其他浏览器,对代码做了相应的修改:

 问题:[1]: ie6下select层,没有被覆盖,也没被锁定,和artdialog锁定背景色不一致。

            [2]: 并且在有些浏览器下有artdialog的盒子黑框。

 解决[1]:在js中,加入,对select下拉框手动锁定和改变背景颜色:

	$("#character").attr("disabled",true);
	$("#character").css("background-color","#E0E0E0");

但在ESC退出和关闭“X”按钮的时候,背景色不返回,则,调用方法解决:

/**
 *ie6 artdialog ESC & cancel select operation
 * */
function cancelDialog(){
	//关于ie6下select无法锁定和变色,或其他问题处理
	$("#character").attr("disabled",false);
	$("#character").css("background-color","#FFFFFF");
}


上cancelDialog()方法,在点下“[确认]”、"[取消]"、ESC键按下,“X”按下使用都要调用(前两者都在上面artdialog代码中实现,后两者如下):

      修改artDialog.js:

      artdialog实现,就是一段html的table+css代码是相对的:

// XHTML 模板
// 使用 uglifyjs 压缩能够预先处理"+"号合并字符串
// @see	http://marijnhaverbeke.nl/uglifyjs
artDialog._templates = 
'<div class="d-outer" role="dialog" tabindex="-1" aria-labelledby="d-title-{id}" aria-describedby="d-content-{id}">'
+	'<table class="d-border">'
+		'<tbody>'
+			'<tr>'
+				'<td class="d-nw"></td>'
+				'<td class="d-n"></td>'
+				'<td class="d-ne"></td>'
+			'</tr>'
+			'<tr>'
+				'<td class="d-w"></td>'
+				'<td class="d-c">'
+					'<div class="d-inner">'
+					'<table class="d-dialog">'
+						'<tbody>'
+							'<tr>'
+								'<td class="d-header">'
+									'<div class="d-titleBar">'
+										'<div id="d-title-{id}" class="d-title"></div>'
+										'<a class="d-close" onclick="cancelDialog();" href="javascript:;" title="{cancelValue}">x</a>'
+									'</div>'
+								'</td>'
+							'</tr>'
+							'<tr>'
+								'<td class="d-main">'
+									'<div id="d-content-{id}" class="d-content"></div>'
+								'</td>'
+							'</tr>'
+							'<tr>'
+								'<td class="d-footer">'
+									'<div class="d-buttons"></div>'
+								'</td>'
+							'</tr>'
+						'</tbody>'
+					'</table>'
+					'</div>'
+				'</td>'
+				'<td class="d-e"></td>'
+			'</tr>'
+			'<tr>'
+				'<td class="d-sw"></td>'
+				'<td class="d-s"></td>'
+				'<td class="d-se"></td>'
+			'</tr>'
+		'</tbody>'
+	'</table>'
+'</div>';

代码中,在23行,“x”链接按钮中,加入“ onclick="cancelDialog();" ”来实现。

   ESC键键盘输入码为"27",将代码:

keyCode === 27 && api._click('cancel'); 

修改成为:

	if(keyCode === 27 && api._click('cancel')){
		cancelDialog();
	}

注:最终,可实现,artdialog覆盖select(视觉效果)。但在ie6下由于层覆盖原因,div覆盖iframe覆盖select,select在artdialog层之上,并未解决!!!。

css样式:

通过各种skins下css的对比,都有点不一样,都不是我想要的,但我所要的各css都有点,所以对chrome.css 和twitter.css 和default.css,进行了合并,完成了

css代码:

@charset "utf-8";
/*
 * artDialog skin
 * https://github.com/aui/artDialog
 * (c) 2009-2013 TangBin, http://www.planeArt.cn
 *
 * This is licensed under the GNU LGPL, version 2.1 or later.
 * For details, see: http://creativecommons.org/licenses/LGPL/2.1/
 */
 
/* common start */
body { _margin:0; _height:100%; }/*IE6 BUG*/ 
.d-outer { text-align:left; outline:none 0; }
.d-border, .d-dialog { border:0 none; margin:0; border-collapse:collapse; width:auto; }
.d-nw, .d-n, .d-ne, .d-w, .d-c, .d-e, .d-sw, .d-s, .d-se, .d-header, .d-main, .d-footer { padding:0; }
.d-header, .d-button { font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; }
.d-title { overflow:hidden; text-overflow: ellipsis; cursor:default;background:rgb(101, 153, 254); }
.d-state-noTitle .d-title { display:none; }
.d-close { display:block; position:absolute; text-decoration:none; outline:none; _cursor:pointer; }
.d-close:hover { text-decoration:none; }
.d-main { text-align:center; vertical-align:middle; min-width:9em; }
.d-content { display:inline-block; display:block\0/*IE8 BUG*/; display:inline-block\9\0; *zoom:1; *display:inline; text-align:left; border:0 none;  }
.d-content.d-state-full { display:block; width:100%; margin:0; padding:0!important; height:100%; }
.d-loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(loading.gif) no-repeat center center; }
.d-buttons { padding:8px; text-align:right; white-space:nowrap; }
.d-button { margin-left:15px; padding: 0 8px; cursor: pointer; display: inline-block; min-height:2.2em; text-align: center; *padding:4px 10px; *height:2em; letter-spacing:2px; font-family: Tahoma, Arial/9!important; width:auto; overflow:visible; *width:1; color: #333; border: 1px solid #999; border-radius: 5px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); background: linear-gradient(top, #FFF, #DDD); background: -moz-linear-gradient(top, #FFF, #DDD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD)); text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);; box-shadow: 0 1px 0 rgba(255, 255, 255, .7),  0 -1px 0 rgba(0, 0, 0, .09); -moz-transition:-moz-box-shadow linear .2s; -webkit-transition: -webkit-box-shadow linear .2s; transition: box-shadow linear .2s; }
.d-button::-moz-focus-inner, .d-button::-moz-focus-outer { border:0 none; padding:0; margin:0; }
.d-button:focus { outline:none 0; border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); }
.d-button:hover { color:#C72015; border-color:#666; }
.d-button:active { border-color:#666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF'); background: linear-gradient(top, #DDD, #FFF); background: -moz-linear-gradient(top, #DDD, #FFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF)); box-shadow:inset 0 1px 1em rgba(0, 0, 0, .6), inset 0 1px 1em rgba(0, 0, 0, .3); }
.d-button[disabled] { cursor:default; color:#666; background:#DDD; border: 1px solid #999; filter:alpha(opacity=50); opacity:.5; box-shadow:none; }
.d-state-highlight { color: #FFF; border: 1px solid #1c6a9e; background: #2288cc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); text-shadow: -1px -1px 1px #1c6a9e; }
.d-state-highlight:hover { color:#FFF; border-color:#0F3A56; }
.d-state-highlight:active { border-color:#1c6a9e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); }
.d-mask { background:#E0E0E0; filter:alpha(opacity=70); opacity:.7; }
/* common end */

.d-inner { background:rgb(255, 255, 255); } /**body background color*/
.d-titleBar { width:100%; height:0; position:relative; bottom:26px; _bottom:0; _margin-top:-26px;}
.d-title { height:26px; line-height:23px; padding:0 60px 0 5px; color:#FFF; font-weight:700; text-shadow:0 1px 0 #000;background:rgb(101, 153, 254); }
.d-nw, .d-n, .d-ne, .d-w, .d-e, .d-sw, .d-s, .d-se { background:rgb(101, 153, 254); background:#6698fe\9!important; }/**title result center*/
.d-nw { width:5px; height:26px; background-position: -46px -8px; }
.d-ne { width:5px; height:26px; background-position: -53px -8px; }
.d-w { background-position:-60px 0; background-repeat:repeat-y; }
.d-e { background-position:-65px 0; background-repeat:repeat-y; }
.d-sw { width:5px; height:5px; background-position: -46px -2px;}
.d-se { width:5px; height:5px; background-position: -53px -2px;}
.d-close { padding:0; top:2px; right:5px; width:21px; height:21px; line-height:21px; font-size:18px; text-align:center; color:#FFFFFF; font-family: Helvetica, STHeiti; _font-family: Tahoma, '\u9ed1\u4f53', 'Book Antiqua', Palatino; border:1px solid transparent; _border:0 none; background:#c4eaff; border-radius:15px;  }/**color result center*/
.d-close:hover { color:#FFF; background:#C72015; border:1px solid #000; _border:0 none; box-shadow: 0 1px 0 rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }/**color result center*/
.d-content {font-size:12px;}  /**body font size*/
.d-n, .d-s { background-color:#F6F6F6; }
.d-n { background-position:0 top; }
.d-s { background-position: 0 bottom; background:rgb(101, 153, 254);}.d-buttons { background-color:#F6F6F6; border-top:1px solid #DADEE5; }
.d-state-noTitle .d-nw, .d-state-noTitle .d-ne, .d-state-noTitle .d-sw, .d-state-noTitle .d-se { width:3px; height:3px; }
.d-state-noTitle .d-inner { border:1px solid #666; background:#FFF; }
.d-state-noTitle { box-shadow:none; }
.d-state-noTitle .d-nw, .d-state-noTitle .d-n, .d-state-noTitle .d-ne, .d-state-noTitle .d-w, .d-state-noTitle .d-e, .d-state-noTitle .d-sw, .d-state-noTitle .d-s, .d-state-noTitle .d-se { background:rgba(0, 0, 0, .05); background:#000\9!important; filter:alpha(opacity=5)!important; }
.d-state-noTitle .d-titleBar { bottom:0; _bottom:0; _margin-top:0; }
.d-state-noTitle .d-close { top:0; right:0; width:18px; height:18px; line-height:18px; text-align:center; text-indent:0; font-family: Helvetica, STHeiti; _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino; font-size:18px; text-decoration:none; color:#214FA3; background:none; filter:!important; }
.d-state-noTitle .d-close:hover, .d-state-noTitle .d-close:active { text-decoration:none; color:#900; }

/* css3 */
/*.d-state-focus {box-shadow:none;
		/*filter: progid:DXImageTransform.Microsoft.Shadow(color=’#FF0000′, Direction=135, Strength=5); background-color: #FF0000;/*for ie6,7,8*/ 
		/*	-moz-box-shadow:2px 2px 5px #FF0000;/*firefox*/ 
		/*	-webkit-box-shadow:2px 2px 5px #FF0000;/*webkit*/
		/*	box-shadow:2px 2px 5px #FF0000;/*opera或ie9*/
		/*	 box-shadow:0 3px 26px rgba(255, 0, 0, .9); }*/

上边,重要解析:

.d-mask { background:#E0E0E0; filter:alpha(opacity=70); opacity:.7; }

上此行css代码,为覆盖页面的背景色和透明度(此处为灰色的#E0E0E0)。

.d-nw, .d-n, .d-ne, .d-w, .d-e, .d-sw, .d-s, .d-se { background:rgb(101, 153, 254); background:#6698fe\9!important; }/**title result center*/

上此行css代码,artdialog框体的主背景。(此处为亮蓝色#6698fe,rgb(101, 153, 254);),由于做了ie6兼容,所以rgba的a和filter:alpha(opacity=70); opacity:.7;的透明度,去除了!

.d-inner { background:rgb(255, 255, 255); } /**body background color*/
.d-content {font-size:12px;}  /**body font size*/

上此行代码为artdialog的内容中的背景色(此处为白色rgb(255, 255, 255);)和字体大小(其他样式可自定义);

.d-title { overflow:hidden; text-overflow: ellipsis; cursor:default;background:rgb(101, 153, 254);}                             .d-title { height:26px; line-height:23px; padding:0 60px 0 5px; color:#FFF; font-weight:700; text-shadow:0 1px 0 #000; background:rgb(101, 153, 254); }
.d-s { background-position: 0 bottom;background:rgb(101, 153, 254); }

上此行css在firefox和chrome头和脚的颜色不显示解决(好像有点概率性,暂无解决)

.d-close:hover { color:#FFF; background:#C72015; border:1px solid #000; _border:0 none; box-shadow: 0 1px 0 rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }/**color result center*/
.d-button:hover { color:#C72015; border-color:#666; }

上此行为鼠标移上“X”关闭连接和按钮时候触发的变红效果(此处为#C72015)

.d-state-focus { box-shadow:0 3px 26px rgba(0, 0, 0, .9);  }

上此行代码向artdialog弹框添加一个阴影特效,也是在ie6下的那个黑色边框的原因,但ie6不支持box-shadow,所以无效,只要有都为黑色实心框。效果图:

代码:

.d-state-focus { box-shadow:0 3px 26px rgba(255, 0, 255, .6); }

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Linux下apache服务器安装,sqlite安装,apache启动,关闭,重启,编写cig程序进行测试,浏览器访问cig程序
 1安装ubuntu 14.04 64位操作系统 2安装apache和sqllite以及依赖的sqllite开发库 3配置目录 /etc/apache2 4 html页面目录 var/www/ 5 cgi-bin目录 /usr/lib/cgi-bin 6日志文件:/var/log/apache2 7站点配
1856 0
服务器已部署SSL开启https协议为什么浏览器仍然提示不安全?
客户反馈服务器已部署SSL,全站开启了https协议访问了,为什么浏览器仍然提示不安全?是证书无效吗?万维景盛工程师检查发现,客户网站虽然已经可以使用https访问了,但网站上仍然还有http协议的js,css,jpg或iframe的资源,因此导致浏览器不出现绿色安全锁。
6323 0
MySQL---数据库从入门走向大神系列(七)-Java访问数据库配置及简单使用方法execute
从操作配置文件properties中读取连接字符串,通过该字符串进行数据连接,需要写三个文件其中,两个是java类,一个是后缀名为.properties的文件,该文件放在src工作目录下。
956 0
PostgreSQL 10.1 手册_部分 III. 服务器管理_第 29 章 监控磁盘使用_29.2. 磁盘满失败
29.2. 磁盘满失败 一个数据库管理员最重要的磁盘监控任务就是确保磁盘不会写满。一个写满了的数据磁盘可能不会导致数据的崩溃,但它肯定会让系统变得不可用。如果保存 WAL 文件的磁盘变满,会发生数据库服务器致命错误并且可能发生关闭。
1072 0
iOS 10 不提示「是否允许应用访问数据」,导致应用无法使用的解决方案
每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 这个坑最近弄得我很抓狂,不过现在基本弄清楚了。记录一下过程中我收集到的信息,分享给大家。
1349 0
SpringBoot实战(四)之使用JDBC和Spring访问数据库
这里演示的是h2databse示例,所以简单的介绍普及下h2database相关知识 H2数据库是一个开源的关系型数据库。 H2是一个嵌入式数据库引擎,采用java语言编写,不受平台的限制,同时H2提供了一个十分方便的web控制台用于操作和管理数据库内容。
1702 0
全民学后端快餐教程(3) - 使用MyBatis访问数据库
使用流行的持久层框架MyBatis来访问数据库
1450 0
数据访问函数库的使用方法(二)—— 获取记录集和使用事务的方法
使用SQL语句来获取记录集的方法 string sql = "select col1,col2,col3  from TableName where ";            //获取DataTable            DataTable dt = dal.
627 0
+关注
tony~tian
追求完美,追求自由!
122
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载