BurgerDialog - 弹出对话框组件 - Burger工具站

<h1 style="text-align: center;color: #673AB7;">BurgerDialog</h1>
<div style="text-align: center;">
    <button class="btn waves-block" onclick="openDialog('#dialog-1');">弹出对话框-1</button>
</div>
<div class="burger-dialog" id="dialog-1">
    <div class="burger-dialog-title">对话框标题</div>
    <div class="burger-dialog-content">对话框内容<br>Made by Burger Studio.</div>
    <div class="burger-dialog-actions">
        <button class="waves-block" onclick="closeDialog('#dialog-1');">取消</button>
        <button class="waves-block" onclick="closeDialog('#dialog-1');">确定</button>
    </div>
</div>
<script>
    function openDialog(element) {
        document.querySelector(element).style.display = "block";
        window.setTimeout(function () {
            document.querySelector(element).style.opacity = "1";
            document.querySelector(element).style.transform = "scale(1)";
            document.querySelector(element).style.zIndex = 999;
        }, 0);
        var cover = document.createElement("div");
        document.body.appendChild(cover);
        cover.classList.add("cover");
        window.setTimeout(function () {
            cover.style.opacity = "1";
        }, 0);
    }
    function closeDialog(element) {
        var cover = document.querySelector(".cover");
        document.querySelector(element).style.opacity = "0";
        window.setTimeout(function () {
            document.querySelector(element).style.display = "none";
            document.querySelector(element).style.transform = "scale(.85)";
            document.querySelector(element).style.zIndex = -1;
        }, 300);
        cover.style.opacity = "0";
        document.body.removeChild(cover);
    }
</script>
<script src="waves/waves.min.js"></script>
<script>
    var config = {
        duration: 500,
        delay: 0
    };
    Waves.init(config);
    Waves.attach('.waves-block', ['waves-block']);
    Waves.attach('.waves-circle', ['waves-circle']);
    Waves.attach('.waves-light', ['waves-light']);
    Waves.attach('.waves-classic', ['waves-classic']);
    Waves.init(config);
</script>