html - HTML5 和 CSS3 模式对话框在 Opera 中不起作用

Question

在这篇出色而简单的文章中，作者解释了如何仅使用 HTML 和 CSS3 构建模式对话框。

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

它工作正常，除了 Opera 12.12 (Opera/9.80 (X11; Linux x86_64) Presto/2.12.388 Version/12.12)。在 Opera 中，所有点击都被禁用。

可能是什么问题？

谢谢。

Answer 1

问题是，模式对话框填满了整个屏幕，而您的“打开”链接就在这个容器（z-Index）的后面，所以永远不能点击它。Opera 的指针事件有问题（不支持），因此您的点击被阻止。你可以做的是像这样隐藏和显示 div：

.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:.5;
    background:red;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    display:none;
}

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