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