遮罩层解决jQuery UI Dialog 内嵌iFrame拖曳缓慢问题

不知道大家使用jQuery UI Dialog 内嵌iFrame页面时候遇到拖曳延迟等问题没有，或者是对mousedown，mouseup事件触发不敏感。特别在同时弹出多个dialog非常明显。很明显问题症结所在就是iframe，所以对症下药就是要把iframe藏起来。在同时不影响用户体验的同时，我的解决方案是：在触发拖曳事件前将整个dialog加一层透明遮罩层，拖曳停止remove掉这个遮罩层。直接贴代码，由于只贴部分关键处理代码。。如果有兴趣可以留言给我。

代码片段：

 

//弹出页：frame页面
function showFrameDialog(url,pageid,height,width) {
    screenWidth = screenWidth || $(document).width();
    screenHeight = screenHeight || $(document).height();

    var maxZindex = getNextZindex();
    onActivePageId = pageid;
    //页面显示前调用
    try {beforeFrameDialogShow(onActivePageId);} catch (e) {}

    var pageIsOpen = false;

    var dialogCount = 0;
    $("iframe").each(function(){

        dialogCount++;

        var $dialog = $(this).parent().parent();
        var key = $(this).attr('key');
        if(pageid == key){
            //alert("page[key:"+pageid+"] Is Open");
            pageIsOpen = true;
            //set z-index at top
            $dialog.css("z-index",maxZindex);
            //set position in center
            resetDialogPosition($dialog);
        }else{
            //reset position
            var offset = (dialogCount%2==0)? 15: -15;
            var _top =  $dialog.position().top + 5;
            var _left = $dialog.position().left + offset;
            //
            resetDialogPosition($dialog,_left,_top);
        }
    });

    if(pageIsOpen)return;

    var w = width || 450;
    var h = height || 285;

    var split = (url.indexOf("?")>0)?"&":"?";
    url = url + split + "__time=" + new Date().getTime()+"&pageid="+pageid;

    var div = document.createElement("div");
    var iframeHtml = " <iframe winStatu='Normal' id='ifr_"+pageid+"' name='ifr_"+pageid+"' width='" + w
            + "px' height='" + h + "px' src='" + url
            + "' frameborder=0 scrolling='no' key='"+ pageid +"'></iframe>";
    var finalTitle = openedTitles[pageid];
    $(div).attr('id', 'div_'+pageid);
    $(div).attr('divHeight', h);
    $(div).attr('divWidth', w);
    $(div).attr('title', finalTitle ? finalTitle : 'Page is Loading...');
    $(div).html(iframeHtml);

    var dlg = $(div).dialog( {
        height : h,
        width : w,
        zIndex:maxZindex,
        resizable : false,
        bgiframe: true,
        beforeclose: function(event, ui) {
            refreshProperties(true);
            //页面关闭前调用
            try{beforeFrameDialogClose(pageid);}catch(err){}
            dlg.remove();
        },
        dragStart: function(event, ui) {},
        drag: function(event, ui) {
            onActivePageId = pageid;
            try{onActivePage(onActivePageId);}catch(err){}
        },
        dragStop: function(event, ui) { }
    });

    //--------------解决拖曳延迟问题 add by vakin 20110818-------------------
    var $waterfall = addWaterfall('#div_'+pageid);
    $waterfall.hide();
    var $headerBar = $('#div_'+pageid).prev();
    $headerBar.bind('mousedown',function(){
            window.console.info.apply(window.console, ["mousedown"]);
            $waterfall.show();
    });
    $headerBar.bind('mouseup',function(){
            window.console.info.apply(window.console, ["mouseup"]);
            $waterfall.hide();
    });
    //--------------add by vakin 20110818 end-------------------

    if(finalTitle)return;
    var frameElm = window.frames['ifr_'+pageid];
    if (frameElm.attachEvent) {
        frameElm.attachEvent("onload", function() {
            setDialogTitle(frameElm,pageid);
        });
    } else {
        try {
            frameElm.onload = function() {
                setDialogTitle(frameElm,pageid);
            };
        } catch (e) {}

    }
}


/*iframe加载完成调用*/
function setDialogTitle(frameElm,pageid,defaultTitle){
    var pageTitle = defaultTitle || frameElm.document.title;
    $("span.ui-dialog-title").each(function(){
         var $this = $(this);
         if($this.attr('id').indexOf(pageid)>0){
             $this.text(pageTitle);
             openedTitles[pageid] = pageTitle;
             return false;
         }
    });
}

//增加遮罩层
function addWaterfall(outterDiv){
    var waterfall = $(document.createElement("div"));
            waterfall.css( {
                "height" : "100%",
                "width" : "100%",
                "filter" : "alpha(opacity = 50)",
                "-moz-opacity" : "0.1",
                "opacity" : "0.1",
                "background-color" : "#fff",
                "position" : "absolute",
                "left" : "0px",
                "top" : "30px",
                "display":"none"
            });
            $(waterfall).appendTo(outterDiv);
            $(waterfall).bind('click',function(){
                $(this).hide();
            });
     return $(waterfall);
}