Tronic247 Material

Dialogs

Edit this page

Dialog Markup

Hover to see an explanation.

<div class="dialog-overlay" id="demodialog">
    <div class="dialog">
        <div class="dialog-header">
            <h3>Select Account</h3>
        </div>
        <div class="dialog-content">
            <!--- Content !-->
            <div class="list">
                <a href="#!" class="list-item">
                    <span class="material-icons">person</span>Account
                    <span class="after">
                        <label class="radio">
                            <input name="accounddemo" type="radio" />
                            <span></span>
                        </label>
                    </span>
                </a>
                <a href="#!" class="list-item">
                    <span class="material-icons">person</span>Account
                    <span class="after">
                        <label class="radio">
                            <input name="accounddemo" type="radio" />
                            <span></span>
                        </label>
                    </span>
                </a>
                <a href="#!" class="list-item">
                    <span class="material-icons">person</span>Account
                    <span class="after">
                        <label class="radio">
                            <input type="radio" name="accounddemo" checked="" />
                            <span></span>
                        </label>
                    </span>
                </a>
            </div>
            <!--- Content !-->
        </div>
        <div class="dialog-footer">
            <!--- Footer !-->
            <button class="text">Select</button>
            <button class="text">Cancel</button>
        </div>
    </div>
</div>

Trigger

Demo content

demo content

<button data-trigger="dialog" data-dialog="#demo-dialog-trigger">Open</button>
<div class="dialog-overlay" id="demo-dialog-trigger">
    <div class="dialog">
        <div class="dialog-header">
            <h3>Demo content</h3>
        </div>
        <div class="dialog-content">
            <p>demo content</p>
        </div>
        <div class="dialog-footer">
            <button class="text" data-trigger="dialog" data-dialog="#demo-dialog-trigger" data-action="close">Dismiss</button>
        </div>
    </div>
</div>

Here are avaialable attributes.

Name Attribute Value(s)
Initialize trigger data-trigger dialog
DOM selector of the dialog data-dialog #id , .class , element
Action data-action open , close , toggle

Bottom sheet style

Accept Cookies

Cookies are yum yum dummy placeholder text for you and everyone nice to see the lorem

<div class="dialog-overlay" id="demodialogsheet">
    <div class="dialog bottom-sheet">
        <div class="dialog-header">
            <h3>Accept Cookies</h3>
        </div>
        <div class="dialog-content">
            <p class="text-muted">Cookies are yum yum dummy placeholder text for you and everyone nice to see the lorem</p>
        </div>
        <div class="dialog-footer">
            <button class="text" onclick="jQuery('#demodialogsheet').toggleClass('open')">Accept</button>
        </div>
    </div>
</div>

Full Screen dialog

Sound

Cookies are yum yum dummy placeholder text for you and everyone nice to see the lorem

<div class="dialog-overlay" id="demodialogfs">
    <div class="dialog fullscreen">
        <div class="dialog-header">
            <div class="dialog-left">
                <button class="fab small unelevated" onclick="jQuery('#demodialogfs').toggleClass('open')"><span class="material-icons">close</span></button>
                <h3 style="margin-left: 10px;">Sound</h3>
            </div>
            <div class="dialog-right">
                <button class="unelevated" onclick="jQuery('#demodialogfs').toggleClass('open')">Close</button>
            </div>
        </div>
        <div class="dialog-content">
            <p class="text-muted">Cookies are yum yum dummy placeholder text for you and everyone nice to see the lorem</p>
        </div>
        <div class="dialog-footer">
            <button class="text" onclick="jQuery('#demodialogfs').toggleClass('open')">Dismiss</button>
            <button class="text" onclick="jQuery('#demodialogfs').toggleClass('open')">Okay</button>
        </div>
    </div>
</div>

JS (jQuery) API

Add the class open to the dialog when you need to open it. Remove the class open from the dialog when you need to close it.

//Open
$(".dialog-overlay#dialog").addClass('open');
//Close
$(".dialog-overlay#dialog").removeClass('open');
//Toggle
$(".dialog-overlay#dialog").toggleClass('open');