弹出对话框插件MiniDialog(原创)

 查看演示  website  立即下载

更新时间：2019/6/21 上午11:36:35

更新说明：

新增 okNotClose 方法用来针对信息展示类对话框点击确定按钮时阻止对话框关闭；

新增 waiting 效果的对话框。

MiniDialog 对话框

功能丰富、使用简单、灵活多样、体积轻巧的无任何第三方依赖的 JavaScript 对话框组件。

源代码说明：

MiniDialog 的原始开发版程序采用基于 es6 标准的 JavaScript 编写，如果需要兼容 IE11 浏览器，需要将其转换成 es5 格式，作者已提供了经过 Babel 转换之后的程序，请前往 dist 目录下查看，该目录下的三个文件分别是基于 es6 的原始未压缩版以及转换成 es5 格式的未压缩和已压缩版，请根据实际需求选择使用。

代码示例：

1. 四种信息提示对话框

2. 快捷方式

3. 常规配置

4. 自定义内容背景色

5. 可拖动的对话框

6. 全屏对话框

7. 自动关闭

8. 嵌入Iframe

9. 嵌入图片

10. 嵌入多张图片

11. 嵌入视频

12. 确定按钮-加载中

13. 按钮事件

14. 开关事件

四种信息提示对话框

// 内容可选
Dialog.info( "标题", "内容" );
Dialog.success( "标题", "内容" );
Dialog.warn( "标题", "内容" );
Dialog.error( "标题", "内容" );
// 还可支持确定回调，如：
Dialog.info( "标题", "内容" ).ok(function () {
    alert( "确定" );    
})

快捷方式

// 只传入内容（此时将采用默认标题：网页消息）
Dialog( "内容" );
// 传入标题和内容
Dialog( "标题", "内容" );
// 传入标题、内容和对话框宽度（单位：px）
Dialog( "标题", "内容", 800 );

常规配置

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

自定义内容背景色

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

可拖动的对话框

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

全屏对话框

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

自动关闭

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

嵌入 Iframe

// iframeContent 中的 src 和 height 属性必须要设置
Dialog({
    title: "标题",
    width: 1100,
    iframeContent: {
        src: "http://www.baidu.com/",
        height: 600
    },
    showButton: false
});

嵌入图片

// imageContent 中的 src 和 height 属性必须要设置
Dialog({
    width: 1100,
    imageContent: {
        src: "demo.png",
        height: 600
    },
    showButton: false,
    showTitle: false,
    maskClose: true
});

嵌入多张图片

// imageContent 中的 src 和 height 属性必须要设置
Dialog({
    width: 700,
    imageContent: {
        src: [ "1.png", "2.png", "3.png", "4.png", "5.png" ],
        height: 400
    },
    showButton: false,
    showTitle: false,
    maskClose: true
});

嵌入视频

// videoContent 中的 src 和 height 属性必须要设置
Dialog({
    width: 800,
    videoContent: {
        src: "demo.mp4",
        height: 450
    },
    showButton: false,
    showTitle: false,
    maskClose: true
});

确定按钮-加载中

Dialog({
    title: "标题",
    content: "内容",
    ok: {
        loading: true,
        loadingText: "等一会",
        callback: function () {
            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({}) 形式调用的对话框，
 * 不能用于 info / success / warn / error 这四种信息提示对话框上
 */
Dialog({
    title: "网页消息",               // 对话框标题（纯文本格式）
    content: "",                    // 对话框内容（可传入 HTML 结构）
    contentBgColor: "#fff",         // 内容区域的背景色
    iframeContent: null,            // 嵌入 iframe 的配置项，有两个必填属性 { src, height }
    videoContent: null,             // 嵌入图片的配置项，有两个必填属性 { src, height }
    imageContent: null,             // 嵌入视频的配置项，有两个必属性 { src, height }，一个可选属性 { autoplay: true/false }
    fullscreen: false,              // 全屏显示
    draggable: false,               // 可以拖动（设置此属性后，遮罩层将自动隐藏）
    maskClose: false,               // 点击遮罩层关闭对话框
    mask: true,                     // 显示遮罩层
    closable: true,                 // 显示右上角关闭图标
    bodyScroll: true,               // body 可以滚动
    showTitle: true,                // 显示标题
    showButton: true,               // 显示按钮
    autoCloseEffect: true,          // 当设置了自动关闭时，显示自动关闭的动画效果
    autoClose: 0,                   // 自动关闭的时长，单位：ms（默认：0 表示不开启自动关闭功能）
    parentsIframeLayer: 0,          // 在祖先级 iframe 中创建对话框，数字表示祖先 iframe 的级数
    borderRadius: 6,                // 对话框圆角值，单位：px
    width: 500,                     // 对话框宽度，单位：px
    ok: {
        text: "确定",                // 确定按钮的文字
        loading: false,             // 点击确定按钮时，是否显示 loading 效果（此时将不会执行关闭对话框的操作）
        loadingText: "确定",         // 显示 loading 效果时，确定按钮文字的变化
        notClose: false,            // 点击确定按钮是否关闭对话框
        callback: function () {}    // 点击确定按钮的回调函数
    },
    cancel: {
        text: "取消",                // 取消按钮的文字
        show: true,                 // 是否显示取消按钮
        callback: function () {}    // 点击取消按钮的回调函数
    },
    afterOpen: function () {},      // 对话框打开后的回调函数
    afterClose: function () {}      // 对话框关闭后的回调函数
});

全局关闭方法：

// 关闭指定对话框
var thisDialog = Dialog( "标题" );
Dialog.close( thisDialog );
// 关闭全部对话框
Dialog.close();

PREVIOUS:
NEXT:
jQuery无缝滑动轮播插件
jQuery自定义分页插件