zoukankan      html  css  js  c++  java
  • 使用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                      '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                      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         });
  • 相关阅读:
    openstack nova创建虚拟机过程(DEBUG)从接收到cli RESTFul请求到给scheduler发送rpc消息
    openstack源码阅读基础:openstack中Nova组件RESTful请求的具体处理函数确定
    博客园第一搏——Html5 JumpStart学习笔记1:Semantic Structure
    我的CSDN博客http://blog.csdn.net/kuangjian007,欢迎骚扰!
    django第一课:基本介绍
    pku 1142 Smith Number
    使用Eclipse开发X3D
    javascript树形控件第二版
    三种方式获得int的size
    细节决定成败
  • 原文地址:https://www.cnblogs.com/luckystar2010/p/4160210.html
Copyright © 2011-2022 走看看