CSS3 dialog without javascript

Quick intro

I will use a hidden checkbox, some sibling combinators and CSS3's :checked pseudo class to do the magic. The buttons to show and dismiss are only labels for the checkbox. Click on the button below to show the dialog:

Show

Other uses of this can be found here.

The code

The CSS for the actual display of the dialog and opaque background:

/** if nothing else do not show the dialog container */ 
.expand, .bg {
        display: none;
}

/** an .expand class immediately following a checked checkbox */
/** this will show the dialog container when the checkbox is checked */
input.check:checked + .expand {
        position: fixed;
        top: 0px; bottom:0px; left: 0px; right: 0px;
        z-index: 10;
        display: block !important;
}

/** a .bg class that follows (not necessarily immediately) a checked checkbox */
/** this is the opaque background layer. active when the dialog is visible. */
input.check:checked ~ .bg {
        position: fixed;
        top: 0px; bottom:0px; left: 0px; right: 0px;
        opacity: 0.5;
        background-color: black;
        z-index: 9;
        display: block !important;
}

/** do not show the checkbox that holds the visibility state of the dialog */
input.check {
        display: none;
}

We used the direct sibling combinator (+) for the .expand class and the general sibling combinator (~) for the background. We could have also used the general one for both. The general matches any sibling, while the direct only the sibling right next to the checkbox.

The code above could be made a little more compact by merging the .expand and .bg common parts.

All the rest of the CSS is to make the dialog look a little like a dialog.

/** dialog look (centered and with a blue title bar) */
.expand .dialog {
        background-color: white;
        margin-left: auto; 
        margin-right: auto;
        margin-top: 10%;
        width: 300px;
        position:relative;
        height: 200px;
        outline: outset 1px darkgrey; 
        padding: 0px 20px;
}

.dialog .title {
        background-color: darkblue; 
        color: white; 
        font-weight: bold;
        padding: 3px 20px;
        margin: 0px -20px 20px -20px;
        
}

.dialog label {
        position: absolute;
        right: 20px;
        bottom: 20px;
        padding: 2px 10px;
        display:block;
        background-color: darkgray;
        outline: outset silver 2px;

}

.dialog label:active {
        outline: inset silver 2px;
}

The HTML part is:

<div>
        <input class="check" id="check1"/>
        <div class="expand">
                <div class="dialog">
                        <div class="title">Alert</div>
                        CSS3 & HTML5 are fun and so cool!
                        <label for="check1" class="button">Dismiss</label>
                </div>
        </div>
        <div class="bg"></div>
</div>

<label for="check1" class="button">Show</label>

Just use a label linked to the check box to activate the dialog.

Alert

CSS3 & HTML5 are fun and so cool! Dismiss