jquery-ui對話框的顏色框結果到最大調用堆棧大小超過錯誤

Question

我使用jquery-ui和它的dialog功能來顯示我的web應用程序中的模式對話框。它工作正常。

在一個使用案例中，我在屏幕上有一個colorbox彈出窗口，一旦用戶輸入完畢，我需要顯示一個確認對話框。

此外，這裏的一切實際工作得益於在我嘗試過的所有主流瀏覽器上的錯誤處理，但我擔心瀏覽器可能會導致一些JavaScript引擎組合的問題。

我得到的錯誤是調用堆棧大小溢出（Chrome顯示它爲Uncaught RangeError: Maximum call stack size exceeded.）。

的模式對話框的代碼是：

function modalDialog(dialogText, dialogTitle, okFunc, okLabel, cancelFunc, cancelLabel) { 

var dialogButtons = {}; 

dialogButtons[okLabel] = function() { 
    if (typeof(okFunc) == 'function') { 
    setTimeout(okFunc, 50); 
    } 
    $(this).dialog('destroy'); 
}; 
dialogButtons[cancelLabel] = function() { 
    if (typeof(cancelFunc) == 'function') { 
    setTimeout(cancelFunc, 50); 
    } 
    $(this).dialog('destroy'); 
}; 

$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({ 
    draggable: true, 
    modal: true, 
    resizable: false, 
    width: 'auto', 
    title: dialogTitle || 'Confirm', 
    minHeight: 75, 
    buttons: dialogButtons 
}); 

}

的顏色框被稱爲在JavaScript中，它需要從實際的頁面嵌入div，因爲它的內容：

$(function() { 
    $(".colorbox-load").colorbox({ 
    inline: true, 
    overlayClose: false, 
    href: "#popupContents", 
    height: "320", 
    width: "300" 
    }); 
}) 

在彈出窗口中，我有一個只打開確認對話框的按鈕。

我提前道歉，因爲這是我第一次使用JSFiddle，並且我無法獲得它在我的頁面上的外觀（它實際上彈出在顏色框的頂部而不是「在後臺「）。我不確定是否因爲我必須使用不同版本的jquery和jquery-ui（我無法從下拉菜單中找到相同的組合）或其他內容。

A JSFiddle is here。如果在按下「打開對話框」按鈕後單擊colorbox區域，您應該會看到相同的錯誤（Firefox和Chrome在顯示錯誤時看起來反應稍微不同）。

謝謝你的任何建議！

Answer 1

看起來像對話框和彩盒是爭取焦點。將trapFocus設置爲false將解決此問題。當然，這可能會對您的頁面產生一些副作用，具體取決於您如何使用它。有關詳細信息，請參閱官方文檔。

$(function() { 
    $(".colorbox-load").colorbox({ 
    inline: true, 
    overlayClose: false, 
    href: "#popupContents", 
    height: "320", 
    width: "300", 
    trapFocus: false 
    }); 
})