HTML5 and CSS3 modal dialog doesn't work in Opera

Question

In this excellent and simple post, the author explains how to build a modal dialog only using HTML and 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

It works fine, except in Opera 12.12 (Opera/9.80 (X11; Linux x86_64) Presto/2.12.388 Version/12.12). In Opera, all clicks are disabled.

What could be the issue?

Thanks.

Answer 1

The problem is, that the modal dialog fills the complete screen, and your 'open' link is simply behind this container (z-Index), so can never click it. Opera has a problem with the pointer-events (no support), therefore your click is blocked. What you could do is to hide and show the div like this:

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