ADWave Docs - Dialog Example

Dialog

Example:


<div
    class="box bg-3"
    style="margin: 1em; display: flex; justify-content: center"
>
    <div class="dialog" style="width: min(32em, 80vw); min-height: 12em">
        <div class="dialog-header">Dialog Title</div>
        <div class="dialog-body">
            <span class="text">This is the dialog content.</span>
        </div>
    </div>
</div>

Result:

This is the dialog content.

Dialog with <dialog />, only header title

Example:


<button
    class="btn"
    onclick='(function(){document.getElementById("dialog-example-1").showModal()})()'
>
    Open Dialog
</button>
<dialog
    id="dialog-example-1"
    class="dialog"
    style="width: min(32em, 80vw); min-height: 12em"
    onclick="event.target.close()"
>
    <div class="dialog-header">Dialog Title</div>
    <div class="dialog-body">
        <span class="text">This is the dialog content.</span>
    </div>
</dialog>

Result:

Dialog with <dialog />, with header button

Example:


<button
    class="btn"
    onclick='(function(){document.getElementById("dialog-example-2").showModal()})()'
>
    Open Dialog
</button>
<dialog
    id="dialog-example-2"
    class="dialog"
    style="width: min(32em, 80vw); min-height: 12em"
>
    <div class="dialog-header">
        <button
            class="btn flat"
            onclick='(function(){document.getElementById("dialog-example-2").close()})()'
        >
            Cancel</button>
        <span class="dialog-title">Dialog Title</span>
        <button
            class="btn primary"
            onclick='(function(){document.getElementById("dialog-example-2").close()})()'
        >
            Confirm
        </button>
    </div>
    <div class="dialog-body">
        <span class="text">This is the dialog content.</span>
    </div>
</dialog>