使用artDialog时遇到的问题
artDialog是一个相当好用的对话框插件。用法可以参考:http://aui.github.io/artDialog/doc/index.html#api-show
但我使用时遇到了下面的问题:
在列表页面,针对每一条数据后面有一个设置按钮,单击设置按钮弹出一个设置窗口1。
在设置窗口中有文件上传的部分,点击上传按钮会使用artDialog弹出一个提示窗口2(提示支持的文件类型,大小等,然后是一个选择文件的按钮)。
现在的问题是:在设置窗口1点击上传按钮时,弹出的提示窗口2被1遮住了。
我用的版本是4.1.2。
百度呢,发现它有一个zIndex属性,不过呢这是一个全局的属性。也就是说呢,你第一个弹出窗口zIndex设置为99,
那么后面的弹出窗口zIndex都是99.那么首先想到了针对设置窗口1和提示窗口2都设置zIndex。
但仅仅这样扔有问题。
第一次是成功的。但将子窗口关闭后,再次打开就被遮住了。由于zIndex是一个全局属性,因此在第一次打开子窗口时已经将zIndex设置为了新的值。
再次打开时父窗口和子窗口的zIndex一样。父窗口大一些,将子窗口遮住了。
那么,解决办法就是:在每次打开子窗口时改变zIndex,让他比父窗口大就行了。
好吧,这样做了之后暂时没有什么问题了。
但是,如果页面有可以input,select之类的,在你点了input,select后发现再点上传按钮又不行了!
那我首先对设置窗口页面的所有input,select加了click事件处理,当click时将zIndex++。
这样做之后,在你click input,select元素时,再点上传按钮没问题。
但如果你改变了值就又不行了。
所以,在失去焦点时,我将zIndex再次++.这样终于没问题了。
相关代码:
list页面:
1 function showSettings(obj) { 2 var posno = $(obj).attr("posno"); 3 var smartid = $(obj).attr("smartid"); 4 var index = artindex(); 5 $.get("${ctx}/tsmartpos/posset/"+smartid,{posno:posno,shopid:shopid,ts:(new Date()).getTime()},function(data){ 6 art.dialog({ 7 id:'parentWindow', 8 lock:true, 9 opacity:0.3, 10 title: '终端素材上传', 11 width: '80%', 12 top:'10%', 13 drag:true, 14 zIndex:index, 15 content: data, 16 esc: true, 17 init:function(){ 18 partdialog = this; 19 } 20 }); 21 }); 22 } 23 24 function closeWin() { 25 partdialog.close(); 26 } 27 function artindex() { 28 return 999; 29 }
设置窗口:
1 var zindex = parent.artindex(); 2 3 //上传图片 4 function uploadImg(type){//上传类型 videourl:视频 , logourl:logo ,wxcodeurl: 二维码 5 flag = type; 6 7 $.get("${ctx}/tsmartset/gotouploadpic/"+type ,{ts:(new Date()).getTime()},function(data){ 8 zindex++; 9 console.log('zindex:'+zindex); 10 art.dialog({ 11 id:'imageart', 12 lock:true, 13 opacity:0.3, 14 title: '上传图片', 15 width: 470, 16 left: '50%', 17 top: '40%', 18 drag:false, 19 zIndex:zindex, 20 content: data, 21 esc: true, 22 init: function(){ 23 pic_artdialog = this; 24 }, 25 close: function(){ 26 //delpic(type) 27 pic_artdialog = null; 28 $('#face').imgAreaSelect({remove:true}); 29 } 30 }); 31 pic_artdialog.show(); 32 }); 33 } 34 35 $("input").click(function(){ 36 zindex++; 37 }).blur(function(){ 38 zindex++; 39 });