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