使用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頁面：

function showSettings(obj) {
            var posno = $(obj).attr("posno");
            var smartid = $(obj).attr("smartid");
            var index = artindex();
            $.get("${ctx}/tsmartpos/posset/"+smartid,{posno:posno,shopid:shopid,ts:(new Date()).getTime()},function(data){
                   art.dialog({
                       id:'parentWindow',
                    lock:true,
                    opacity:0.3,
                    title: '終端素材上傳',
                    width: '80%',
                    top:'10%',
                    drag:true, 
                    zIndex:index,
                    content: data,
                    esc: true,
                    init:function(){
                        partdialog = this;
                    }
                });
              });
        } 
        
        function closeWin() {
            partdialog.close();
        }
        function artindex() {
            return 999;
        }

 

設置窗口：

var zindex = parent.artindex();

//上傳圖片
        function uploadImg(type){//上傳類型  videourl：視頻 , logourl：logo ,wxcodeurl： 二維碼
            flag = type;
            
            $.get("${ctx}/tsmartset/gotouploadpic/"+type ,{ts:(new Date()).getTime()},function(data){
                zindex++;
                console.log('zindex:'+zindex);
                   art.dialog({
                       id:'imageart',
                    lock:true,
                    opacity:0.3,
                    title: '上傳圖片',
                    width: 470,
                    left: '50%',
                    top: '40%',
                    drag:false,
                    zIndex:zindex,
                    content: data,
                    esc: true,
                    init: function(){
                       pic_artdialog = this;
                    },
                    close: function(){
                       //delpic(type)
                       pic_artdialog = null;
                       $('#face').imgAreaSelect({remove:true}); 
                    }
                });
                pic_artdialog.show();
              });
        }

$("input").click(function(){
            zindex++;
        }).blur(function(){
            zindex++;
        });