莫代爾在IE10中無法正常工作，但在其他瀏覽器中正常工作

我正在從下面的在線示例創建基於CSS唯一方法的模式對話框。它在IE 11，Chrome和Firefox中運行良好，但在IE 9和IE 10中，模式不起作用。莫代爾在IE10中無法正常工作，但在其他瀏覽器中正常工作

在IE 9和IE 10中，你不能點擊任何內容 - 在這個例子中它是一個鏈接，但在我自己的實現中，我在頁面上有幾個按鈕，其中只有一個實際打開模式，而且它們都不能被點擊 - 我在想，因爲模式可能會以某種方式位於按鈕的上方，即使它不可見。

任何人都可以請幫我找出爲什麼這不是在IE 9和IE 10中工作，以及是否有什麼我可以做的修復它在這些瀏覽器？另外，我對web開發有點新鮮。有沒有任何工具可以分析你的標記和CSS，看看是否存在與舊瀏覽器的兼容性問題？也許這樣的工具可以幫助我。

這裏是的jsfiddle

http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

或者這裏是代碼，你可以只保存到一個HTML文件並加載到瀏覽器中。

<!doctype html> 
<html lang="en"> 
<head> 
    <style> 
    .modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
    } 

    .modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
    } 

    .modalDialog > div { 
    width: 400px; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #999); 
    background: -webkit-linear-gradient(#fff, #999); 
    background: -o-linear-gradient(#fff, #999); 
    } 

    .close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
    } 

    .close:hover { 
    background: #00d9ff; 
    } 
    </style> 
</head> 
<body> 
    <a href="#openModal">Open Modal</a> 
    <div id="openModal" class="modalDialog"> 
    <div> 
     <a href="#close" title="Close" class="close">X</a> 
     <h2>Modal Box</h2> 

     <p>This is a sample modal box that can be created using the powers of CSS3.</p> 
     <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> 
    </div> 
    </div> 
</body>

來源

2015-06-10 Jim

轉換在IE9中不起作用。 – Rob

的代碼在IE 10渲染的方式是模態的不透明度設置爲0，但模態層仍然被上述的「開放模態」鏈接現有由於模態z-index被設置爲99999。如果將鏈接更改爲position: relative和z-index大於99999，您將能夠使用鏈接訪問模式，除非現在鏈接將在模式打開時顯示在「頂部」（我假設您不想要有發生）

問題的一部分是指針事件不支持IE 9 & 10.你可以read more about that here（也許找到解決？）

我個人建議使用類，該類具有display:none;，並使用JQuery來顯示/隱藏該類，以便輕鬆切換您的模態。

希望幫助

來源

2015-06-10 20:35:29 crazymatt

謝謝，是的，這確實有幫助。我其實可以通過在.modalDialog CSS中將z-index設置爲-1，然後在.modalDialog中設置z-index：target CSS我可以將z-index設置回某個正數，比如99或者其他。 – Jim

設置模式的初始狀態z-index:-1。

與z-indexes存在衝突。儘管模式沒有不透明性，但它仍然佔用了空間並阻止了IE10上的鏈接被點擊。

See Demo

來源

2015-06-10 22:10:37 Oriol

謝謝，是的，這是我解決問題的方法。真正的問題是，我沒有完全理解它而使用別人的例子 - 現在我更瞭解它。 – Jim

莫代爾在IE10中無法正常工作，但在其他瀏覽器中正常工作

回答

相關問題