無模式窗口的行為類似於使用javascript的模式窗口

Question

我要求在網頁上顯示一些模式彈出窗口。 最初，我將它們實現為真正的模式窗口，但是后來我發現真正的模式窗口無法與IE中的父窗口進行通信。

現在，我正在嘗試將它們實現為常規窗口，這些窗口始終會搶占焦點，這在一定程度上是可行的。

這是我正在使用的代碼：

modalPopup = window.open(url, 'popup', arr.join(",")); //use a global var here
modalPopup.focus();

$(window).bind("focus.modal", function(){
  if(modalPopup){
    modalPopup.focus();
  } else {
    $(window).unbind("focus.modal");
  }
});

這有幾處錯誤：

1. 在firefox中，一旦我關閉彈出窗口，modalPopup便不會變為空，而是指向父窗口。 （沒關系，因為我們仍然不支持Firefox）

2. 在IE中，當您打開1個窗口並將其關閉時，它的工作原理就像一個超級按鈕，但是打開任何其他窗口都會導致異常：

   錯誤：被叫方（服務器[非服務器應用程序]）不可用並消失； 所有連接均無效。 呼叫未執行。

編輯 ：在IE中的錯誤發生在modalPopup.focus（）;。 叫做。 顯然，在關閉時，modalPopup從未設置為偽造的值：P

您能幫我寫一個更好的實現，使用window.open來創建彈出窗口嗎？

在任何人說什么之前， 都不可以使用lightbox。 彈出窗口包含大量html，javascript等，並且將它們加載到DOM中不會帶來良好的UX。 另外，我們必須在IE6上進行這項工作。

Answer 1

包含“大量” JavaScript，HTML等的窗口並不是您不能使用“燈箱”樣式技術的原因（該技術在IE6上有效；我不知道您是否看過特定的庫在不）。 該技術很簡單：

• 在頁面上放置絕對位置的iframe ，其i-index高於頁面上通常顯示的任何其他內容。 通常， iframe是隱藏的。
• 執行“模式”時，請顯示該iframe並將其設置為覆蓋所有其他內容。 創建一個絕對定位的div ，該div的z索引比iframe ，並將其放置在任意位置（通常位於視口的中間）。
• 將您的“模式”內容放在該div中。 可以預先加載它，也可以要求加載JavaScript和其他資源來填充它。
• 在div上有某種UI控件，通過移除div並隱藏iframe來“關閉”它。

您可以使用它構建非常豐富的UI，與強制實施多個窗口相比，UX可以有更好的用戶體驗。 而且，您還具有避免跨窗口通信的優勢，並且可以在用戶“打開”這些窗口之一時為用戶提供更好的響應時間。