Dialogs

<dialog id="dialog-1">
    <p>This is a test dialog</p>
    <button onclick="document.querySelector('#dialog-1').close();">Close Dialog</button>
</dialog>

<dialog id="dialog-2">
    <header>
        <h2>Dialog with heading</h2>
        <button class="close" command="close" commandfor="dialog-2"></button>
    </header>
    <div>This is a test dialog</div>
    <footer>
        <button onclick="document.querySelector('#dialog-2').close();">Ok</button>
    </footer>
</dialog>

<dialog id="dialog-3">
    <div>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
        <p>This is a test dialog with a long text.</p>
    </div>
    <button onclick="document.querySelector('#dialog-3').close();">Close Dialog</button>
</dialog>

<dialog id="dialog-error" class="error">
    <header>
        <h2>Error Dialog</h2>
        <button class="close" command="close" commandfor="dialog-2"></button>
    </header>
    <div>This is a test dialog</div>
</dialog>
<dialog id="dialog-warning" class="warning">
    <header>
        <h2>Warning Dialog</h2>
        <button class="close" command="close" commandfor="dialog-warning"></button>
    </header>
    <div>This is a test dialog</div>
</dialog>
<dialog id="dialog-success" class="success">
    <header>
        <h2>Success Dialog</h2>
        <button class="close" command="close" commandfor="dialog-success"></button>
    </header>
    <div>This is a test dialog</div>
</dialog>

<dialog id="dialog-info" class="info">
    <header>
        <h2>Info Dialog</h2>
        <button class="close" command="close" commandfor="dialog-info"></button>
    </header>
    <div>This is a test dialog</div>
</dialog>

<dialog id="dialog-help" class="help">
    <header>
        <h2>Help Dialog</h2>
        <button class="close" command="close" commandfor="dialog-help"></button>
    </header>
    <div>This is a test dialog</div>
</dialog>
<button onclick="document.querySelector('#dialog-1').showModal();">Open Dialog</button>
<button command="show-modal" commandfor="dialog-2">Open Dialog with Heading</button>
<button onclick="document.querySelector('#dialog-3').showModal();">Open Dialog with Long Text</button>
<button class="error" onclick="document.querySelector('#dialog-error').showModal();">Open Error Dialog</button>
<button class="warning" onclick="document.querySelector('#dialog-warning').showModal();">Open Warning Dialog</button>
<button class="success" onclick="document.querySelector('#dialog-success').showModal();">Open Success Dialog</button>
<button class="info" onclick="document.querySelector('#dialog-info').showModal();">Open Info Dialog</button>
<button class="help" onclick="document.querySelector('#dialog-help').showModal();">Open Help Dialog</button>