jquery iframeFix實現

Question

我有一個包含iframe的jquery-ui模式彈出窗口。它被稱爲如此：

$("#modalDiv").dialog({ 
     modal: true, 
     autoOpen: false, 
     height: '400', 
     width: '400', 
     position: ['150', '200'], 
     draggable: true, 
     resizable: false, 
     title: 'Loading...' 
    }); 

    $('#modalIFrame').attr('src', url); 
    $('#modalDiv').dialog('open'); 

問題是，拖動模態是非常粗略的。我明白這基本上是由於iframe攔截拖動事件。我試圖實施「iframeFix」解決方案，但它似乎並沒有工作。我目前從彈出調用它像這樣：

window.parent.$("#modalDiv").draggable("option", "iframeFix", true); 

我也試了一下從父頁面通過以下兩種方法：

$("#modalDiv").draggable("option", "iframeFix", true); 
    $("#modalIFrame").draggable("option", "iframeFix", true); 

沒有運氣。

Answer 1

我不確定iframeFix是如何工作的，但這裏是我目前使用的解決方案。我在jQuery UI網站上添加了一個bug report，看起來他們正在爲下一個版本的jQuery UI工作。

我注意到你的對話框指定它不可調整大小，所以下面的內容應該可以解決你的問題。如果您需要可調整大小的對話框，則需要用dialogdragstart dialogresizestart替換dialogdragstart，同樣用替換dialogdragstop dialogresizestop。

$("#modalDiv") 
    .dialog({ 
     modal : true, 
     autoOpen : false, 
     height : 400, 
     width : 400, 
     position : [ 150, 200 ], 
     draggable: true, 
     resizable: false, 
     title : 'Loading...' 
    }) 
    .bind('dialogdragstart', function() { 
     var overlay = $(this).find('.hidden-dialog-overlay'); 
     if (!overlay.length) { 
      overlay = $('<div class="hidden-dialog-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;z-order:100000;"></div>'); 
      overlay.appendTo(this); 
     } 
     else 
      overlay.show(); 
    }) 
    .bind('dialogdragstop', function() { 
     $(this).find('.hidden-dialog-overlay').hide(); 
    });