IE8允許用戶與被模式窗口遮蔽的元素進行交互

我有一個彈出窗口，（應該是模態的），消息對話（#modal）。我添加了一個「背景」元素（#blinds）來隱藏和阻止用戶與頁面上的其他元素進行交互。這在Firefox中效果很好，而不是在IE8中。IE8允許用戶與被模式窗口遮蔽的元素進行交互

在IE8中，我可以點擊，編輯輸入字段並提交表單。有沒有辦法通過HTML和CSS來防止這種情況？我需要一個jQuery解決方案嗎？

CSS;

#blinds { 
    background-color: rgba(0, 0, 0, 0.5); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)"; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    z-index: 1000; 
} 

#modal { 
    position: fixed; 
    z-index: 1001; 
    display: none; 
}

HTML;

<div id='blinds'></div> 
<div id='modal'> 
    <h1></h1> 
    <span>X</span> 
    <p></p> 
</div>

這裏是一個jsFiddle，說明我的問題與IE8。 http://jsfiddle.net/cAkzq/

來源

2012-03-30 Orange Kid

向疊加層添加虛擬點擊事件。 – 2012-03-30 20:46:24

在疊加層上添加點擊和按鍵處理程序仍然允許我單擊「下方」並與元素進行交互。 – 2012-03-30 20:50:36

在測試jsFiddle中沒有看到這個。 – j08691 2012-03-30 20:50:55

這是這樣做的-ms-filter。爲您的顏色疊加使用半透明的PNG，它應該解決這個問題。供應商標籤是實驗性的，可能是非標準的。

來源

2012-03-30 21:28:26

謝謝。那就是訣竅。 – 2012-04-03 20:37:01

IE8允許用戶與被模式窗口遮蔽的元素進行交互

回答

相關問題