HTML对话框 - 背景颜色

Question

我一直在关注如何创建对话框的几个指南：

http://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element

出于某种原因，我的CSS没有呈现背景颜色。

这是我的小提琴：http://jsfiddle.net/oampz/8kRc3/

HTML：

<dialog class="modal">This is the dialog!</dialog>

CSS：

.modal {
    /* arbitrary styling */
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    height:200px;
    width:300px;
    /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
    position:fixed;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
}
.modal::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

任何帮助表示赞赏

Answer 1

将背景颜色更改为任何其他颜色，然后变为白色！它在Chrome中工作：看看这里...... http://jsfiddle.net/8kRc3/3/

body{
     background-color: blue;
}
.modal {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    height:200px;
    width:300px;
    position:fixed;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
}

Answer 2

请以这种方式尝试

 .modal::after {
        position: fixed;
        content:'';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

Answer 3

你可以简单地使用：

背景：颜色;

而不是不起作用的背景颜色。