Modal 在 IE10 中不工作，但在其他浏览器中工作正常

Question

我正在根据下面在线示例中的 CSS 方法创建模式对话框。它在 IE 11、Chrome 和 Firefox 中运行良好，但在 IE 9 和 IE 10 中，模式不起作用。

在 IE 9 和 IE 10 中，您无法单击任何内容 - 在本例中是 link，但在我自己的实现中，页面上有多个按钮，只有一个实际上打开了模态框，但它们都无法点击 - 我在想是因为模态框可能以某种方式位于按钮之上，即使它是不可见的。

任何人都可以帮我弄清楚为什么这在 IE 9 和 IE 10 中不起作用，以及我是否可以采取任何措施来修复这些浏览器中的问题？另外，我对网络开发有点陌生。是否有任何工具可以分析您的标记和 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>

Answer 1

代码在 IE 10 中呈现的方式是模态不透明度设置为 0，但模态层仍然存在于 'open modal' link 上方，因为模态 z-index设置为 99999。如果将 link 更改为具有 position: relative 和大于 99999 的 z-index，您将能够使用 link 访问模式，除非现在 link 将在打开时显示模态的 "on top"（我假设你不希望发生这种情况）

部分问题是 IE 9 和 10 不支持指针事件。您可以read more about that here（也许找到解决方法？）

我个人建议使用 .hide class display:none; 并使用 JQuery 到 show/hide class 以便轻松切换你的模式。

希望对您有所帮助

Answer 2

设置模态的初始状态为z-index:-1。

与 z-indexes 有冲突。尽管模式没有不透明度，它仍然占用 space 并阻止 link 在 IE10 上被点击。

See Demo

Modal 在 IE10 中不工作，但在其他浏览器中工作正常

Modal not working in IE10, but works fine in other browsers

html

css

internet-explorer

internet-explorer-10