HTML dialog - background colour

Question

I have been following a couple of guides of how to create a dialog box:

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

For some reason, my CSS is not rendering the background-colour.

Here is my fiddle: 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);
}

Any help appreciated

Answer 1

change the background color to any other color then white ! it's working in Chrome : take a look here ... 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

please try in this way

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

Answer 3

You could simply use the:

background: color;

Instead of the background-color which doesn't work.

Answer 4

According to the docs, it only works if you call the method .showModal()

The ::backdrop CSS pseudo-element can be used to style behind a element when the dialog is displayed with HTMLDialogElement.showModal(). For example, to dim unreachable content behind the modal dialog.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Answer 5

State 2023: there is the ::backdrop CSS pseudo element.

dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}

For more info, see: https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop?retiredLocale=en