Dialogs

Dialog Markup

Hover to see an explanation.

Usage

<div class="dialog" id="a">
    <div class="content">
        Content goes here
        <br>
        <button id=aa class=btn>Close</button>
    </div>
</div>
<button id=aaa class=btn>Open</button>

let a = document.querySelector("#a");
let aaa = document.querySelector("#aaa");
let aa = document.querySelector("#aa");

aaa.addEventListener("click", () => {
    Material.Dialog.open(a);
});

aa.addEventListener("click", () => {
    Material.Dialog.close(a);
});

Bottom sheet style

Add the class bottom-sheet to the dialog to make it a bottom sheet.

Javascript API

let Dialog = Material.Dialog;
// Open a dialog
Dialog.open(element);
// Close a dialog
Dialog.close(element);
// Toggle a dialog
Dialog.toggle(element);