MiniDialog 对话框

信息展示

Dialog.info( "info 对话框", "内容区域" );
Dialog.success( "success 对话框", "内容区域" );
Dialog.warn( "warn 对话框", "内容区域" );
Dialog.error( "error 对话框", "内容区域" );

信息展示 - 手动控制

Dialog.info( "info 对话框", "内容区域" ).ok(function () {
    alert( "回调事件" );
});
Dialog.info( "info 对话框", "内容区域" ).okNotClose().ok(function () {
    window.setTimeout(function () {
        Dialog.close();
    }, 3000)
});
Dialog.info( "info 对话框", "内容区域" ).okNotClose().ok(function ( okBtn ) {

    // 改变按钮文字
    okBtn.querySelector( "span" ).textContent = "3 秒后关闭...";
	
    // "mini-dialog-ok-disabled" 是内置的 class 可以使按钮不可再点击
    okBtn.classList.add( "mini-dialog-ok-disabled" );
	
    // 3 秒后关闭对话框
    window.setTimeout(function () {
        Dialog.close();
    }, 3000)
});

快捷方式

Dialog( "内容" );
Dialog( "标题", "内容" );
Dialog( "标题", "内容", 800 );

常规配置

Dialog({
    title: "标题",
    content: "内容"
});
Dialog({
    title: "标题",
    content: "内容",
    width: 800
});
Dialog({
    title: "标题",
    content: "内容",
    contentBgColor: "#f5f5f5"
});

可拖动对话框

关闭所有对话框

Dialog({
    title: "标题",
    content: "内容",
    draggable: true
});

全屏对话框

Dialog({
    title: "标题",
    content: "内容",
    fullscreen: true
});

自动关闭

Dialog({
    title: "标题",
    content: "内容",
    autoClose: 5000
});

嵌入 Iframe

Dialog({
    title: "标题",
    width: 1100,
    iframeContent: {
        src: "http://www.baidu.com/",
        height: 600
    },
    showButton: false
});

嵌入图片

Dialog({
    width: 1100,
    imageContent: {
        src: "demo.png",
        height: 600
    },
    showButton: false,
    showTitle: false,
    maskClose: true
});

嵌入多张图片

Dialog({
    width: 700,
    imageContent: {
        src: [ "1.png", "2.png", "3.png", "4.png", "5.png" ],
        height: 400
    },
    showButton: false,
    showTitle: false,
    maskClose: true
});

嵌入视频

Dialog({
    width: 800,
    videoContent: {
        src: "demo.mp4",
        height: 450
    },
    showButton: false,
    showTitle: false,
    maskClose: true
});

确定按钮 - 等待中

Dialog({
    title: "标题",
    content: "内容",
    ok: {
        waiting: true,
        waitingText: "等一会",
        callback: function () {
            window.setTimeout(function () {
                Dialog.close();
            }, 3000)
        }
    }
});

按钮事件

Dialog({
    title: "标题",
    content: "内容",
    ok: {
        callback: function () {
            alert( "确定" );
        }
    },
    cancel: {
        callback: function () {
            alert( "取消" );
        }
    }
});

开关事件

Dialog({
    title: "标题",
    content: "内容",
    afterOpen: function () {
        alert( "打开了对话框" );
    },
    afterClose: function () {
        alert( "关闭了对话框" );
    }
});

隐藏头尾

Dialog({
    content: "内容",
    showTitle: false
});
Dialog({
    content: "内容",
    showButton: false
});
Dialog({
    content: "内容",
    showTitle: false,
    showButton: false,
    maskClose: true
});

等待中

Dialog.waiting( "处理中，请等待..." );
Dialog.waiting(function ( $text ) {
    var timer = null;
    var num = 6;
    var fn = function () {
        num--;
        $text.innerHTML = "处理中，请等待...<br>" + num;
        if ( !num ) {
            window.clearInterval( timer );
            Dialog.close();
        }
    }
    fn();
    timer = window.setInterval( fn, 1000 );
});