模式在 IE10 中不工作，但在其他浏览器中工作正常答案

【问题标题】：Modal not working in IE10, but works fine in other browsers模式在 IE10 中不工作，但在其他浏览器中工作正常
【发布时间】：2015-08-26 05:54:08
【问题描述】：

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

在 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>

【问题讨论】：

过渡在 IE9 中首先不起作用。

标签： html css internet-explorer internet-explorer-10

【解决方案1】：

代码在 IE 10 中呈现的方式是将模态不透明度设置为 0，但模态层仍然存在于“打开模态”链接上方，因为模态 z-index 设置为 99999。如果您更改链接具有大于 99999 的 position: relative 和 z-index 您将能够使用您的链接访问模式，除非现在链接将在模式打开时显示在“顶部”（我假设你不想发生）

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

我个人建议使用具有display:none; 的.hide 类并使用JQuery 显示/隐藏该类，以便轻松切换模式。

希望有帮助

【讨论】：

谢谢，是的，这确实有帮助。我实际上认为我可以通过在 .modalDialog CSS 中将 z-index 设置为 -1 来解决此问题，然后在 .modalDialog:target CSS 中我可以将 z-index 设置回某个正数，例如 99 之类的。

【解决方案2】：

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

z-index 有冲突。尽管modal没有不透明度，但它仍然会占用空间并阻止链接在IE10上被点击。

See Demo

【讨论】：

谢谢，是的，这就是我解决问题的方法。真正的问题是我在没有完全理解的情况下使用了别人的例子——现在我理解得更好了。