有什么方法可以使div后面的按鈕可單擊，而不禁用div中的按鈕？

Question

我有一個網頁使用iFrame加載動態標頭（長話短說，我們有一個大型網站，其中包含Shopify頁面；該網站上的每個其他頁面都使用Ektron小部件來加載標頭，但我不能這樣做Shopify代碼中的代碼，因此我改用iFrame從單獨的頁面加載標頭）。 標頭包含需要工作的按鈕，以及單擊登錄按鈕時打開的模式窗口。 模態窗口就是問題所在。 我的iFrame當前是標題本身的大小（330像素）； 如果iFrame窗口大於該窗口，則它將覆蓋頁面下方的內容，並使這些按鈕不可單擊。 我無法在iFrame中添加“ pointer-events：none”，因為我需要iFrame標頭中的按鈕才能正常工作。 但是，當登錄模式打開時，由於iFrame不足以顯示整個內容，因此它會被截斷。 我也不能將iFrame的高度設置為1000px並使用z-index將其放在其他內容的后面，因為當我這樣做時，Shopify頁面上的內容顯示在模式窗口的頂部。

我嘗試的最后一件事是動態更改iFrame的高度，以便在單擊登錄按鈕時，iFrame的高度增加以顯示整個模態。 但是，由於iFrame內容與Shopify頁面具有不同的域，因此無法將iFrame定位為標題文檔的父級。

我真正想做的是使iFrame的高度足夠大以顯示模式窗口，同時使iFrame后面的按鈕可單擊，而不禁用iFrame中的按鈕。 有什么辦法可以使div中和后面的按鈕同時啟用嗎？

Answer 1

這將是非常糟糕的UX，您應該真正考慮做其他事情。 但是無論如何，至少在較新的瀏覽器中，您可以放置​​一個pointer-events: none iframe上pointer-events: none樣式，這將使其無法捕獲任何點擊。 然后，您放置一個pointer-events: auto在iframe中的模式內的按鈕上pointer-events: auto放置，以使它們至少可以正確記錄點擊。 這樣，您將實現點擊。

當然，所有現代瀏覽器都支持指針事件 （但不支持IE10及以下版本）