Material-design-lite: Grey overlay background for Dialog component ?

[happyvig]

Hi.,

I want to use MDL Dialog box for my website. I used the following code :

<dialog id="dialog" class="mdl-dialog">
    <h4 class="mdl-dialog__title">Hello User</h4>
    <div class="mdl-dialog__content">
      <p>Hello world from dialog!<p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
</dialog>

And invoked the dialog it by :

document.getElementById('dialog').showModal();

This brings up a popup like this, which doesn't have background overlay (50% opacity black background) :

[Garbee]

Can you please provide a working sample case via codepen? It looks like custom code is most likely interfering here or your HTML structure isn't as it should be.

[happyvig]

I had to add this to my style to get it worked:

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

I think some library was messing around. I am closing this defect now in favour of this.

Thanks.