animationModal.js對話框使鏈接不可單擊（即使它具有z-index：-9999）

Question

我正在使用animationModal.js來獲取一些簡單的對話框。 一切都像魅力一樣運作，但是我無法單擊頁面頂部徽標上的鏈接，因為

opacity:0;
z-index:-9999;

在它的前面。 它位於所有其他內容的后面，並且不透明度為0，就像應該的那樣，但不知何故它仍位於徽標的前面 。 徽標的z-index:100 ，但它前面仍然是不可見的模態。

因為我無法找到的聯機版本animatedModal.js （如cdnjs.com或水木清華），我不能讓一個小提琴，但你可以在這里看看我的網頁：

• 完整的網站
• 和animatedModal.js在我的網站

Answer 1

問題很簡單。 您正在失去z-index的蹤跡。 我沒有所有設置z-index的地方，但我發現這兩個至關重要：

• 您的代碼（class = logo）的z-index為100
• 您的div標簽（class = content）的z-index為200

因此，瀏覽器將了解您始終希望內容位於標簽之上。 因此，請記住這一點，讓我們看看如何為模態設置z-index。

• 您的模態的Z索引為-9999，相對於其父級（內容）=>，這意味着它的Z索引實際上為200。（-9999）。

這意味着無論您在徽標上使用什么z-index，它都將始終位於模式下方：

TL; DR：此修復程序將內容z-index設置為低於您的標簽。 或重新組織您的DOM，因為模態不需要在調用鏈接旁邊。 如果選擇第二個，則設置一個標簽，z-index可能會加入。