Question

我正在根据以下在线示例中的仅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>

Answer 1

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

部分问题是IE 9＆amp; 10.你可以read more about that here（也许可以找到解决方法吗？）

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

希望有所帮助

Answer 2

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

与z-index存在冲突。尽管模态没有不透明度，但它仍占用空间并阻止在IE10上单击链接。

See Demo

Modal无法在IE10中运行，但在其他浏览器中运行良好

2 个答案: