Wie blende ich einen HTML5-Dialog ein? ⇐ HTML

[Guest]

Wie kann ich einen HTML5-Dialog einblenden? Und mit Dialog meine ich das HTML5--Tag (http://demo.agektmr.com/dialog/).

Ich habe Folgendes versucht (http ://jsfiddle.net/v6tbW/), aber aus irgendeinem Grund funktioniert der Übergang nicht.

HTML

Code: Select all

Test



document.getElementById('myDialog').show(); // note that this is a method of , this is not a jQuery method.

CSS

Code: Select all

dialog {
position: absolute;
left: 0; right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;

width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;

height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;

visibility:hidden;
opacity:0;
transition:visibility 10s linear 10s,opacity 10s linear;
}

dialog[open] {
visibility:visible;
opacity:1;
transition-delay:0s;
}

.backdrop {
position: fixed;
background: rgba(0,0,0,0.1);
top: 0;
bottom: 0;
left: 0;
right: 0;
}