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;
}