MDialog Beta v2.2

寻求简单，精简的网页对话框，专注于友好的接口，千里之行，始于足下。

快速入门

如何使用插件

1.务必使用正确的 HTML 文档申明 如：
XHTML 申明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
或者
HTML5 申明 <!DOCTYPE HTML>

2.引入文件
<link rel="stylesheet" href="MDialog.css">
<script type="text/javascript" src="MDialog.js"></script>

普通对话框

$M({
    title: 'MDialog',
    content:'<p>欢迎使用 MDialog 对话框！</p>'
});

交互对话框

$M({
    title: 'MDialog',
    content:'<input type="text" name="demo" >',
    fixed: true,
    lock: true
});

气泡对话框

$M().msg('欢迎使用 MDialog 对话框！').lock().time(3);

添加按钮


$M({
    title: 'MDialog',
    content: '<p>按钮函数设置为回调函数，则不关闭对话框<br />否则设置其它类型点击都会关闭对话框</p>',
    ok: function(){
        this.title('正在提交...');
    },
    okVal: '提交',
    cancel: false,
    cancelVal: '关闭'
});

自动关闭对话框

$M({
    title: 'MDialog',
    content:'三秒内自动关闭对话框!',
    time: 3
});

底部添加HTML

$M({
    title: 'MDialog',
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    statusbar:'<label><input type="checkbox">不再提醒</label>',
    ok: false
});

阻止对话框关闭

$M({
    title: 'MDialog',
    content: '<p>点击按钮无法关闭对画框</p>为了用户体验，我设置了10秒后自动关闭',
    ok:function(){
        alert('不允许关闭');
    },
    time: 10,
    unclose: true,
    okVal: '提交',
    cancel: function(){
        alert('不允许关闭');
    },
    cancelVal: '关闭',
    esc: false
});

不显示取消按钮

$M({
    title: 'MDialog',
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    ok: false
});

iframe 引用的内容

//oniframeload 中的 doc 参数等于 iframe.document, 而不是当前文档中的 document 请务必区分
//this.data 则用于协助在MDialog对象中传递数据

$M({
    title: 'iframe 调用',
    iframe: true,
    padding: 0,
    top: '50%',
    fixed: true,
    close: function(){
        var doc = this.data; 
        $M({ 
            content: doc.getElementById('text1').value
        });
    },
    oniframeload: function(doc){
        this.data = doc;
        alert('iframe 载入完成');
    },
    content: 'iframe.html'
});

配置选项

[title] 说明：设置对话框标题默认：'消息'类型：(String)

$M({
    title: '我改变了标题',
    content: '<p>欢迎使用 MDialog 对话框！</p>'
});

[content] 说明：设置对话框内容默认：'Loading...'类型：(String, HTMLElement)

//文字类型

$M({
    content: '欢迎使用 MDialog 对话框！'
});

//HTML 类型

var elem = document.getElementById('h1').innerHTML;
$M({
    content: elem
});

//HTMLElement 类型

测试数据呵呵

var elems = document.getElementById('id_test');
$M({
    content: elems
});

[statusbar] 说明：设置对话框底部内容默认：null类型：(String, HTMLElement)

//文字类型

$M({
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    statusbar: '底部文字'
});

//HTMLElement 类型

$M({
    title: 'MDialog',
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    statusbar:'<label><input type="checkbox">不再提醒</label>',
    ok: false
});

[untitle] 说明：设置是否显示标题元素默认：false类型：(Boolean)

$M({
    title: '我是标题',
    untitle: true,
    content: '<p>欢迎使用 MDialog 对话框！</p>'
});

[unclose] 说明：设置是否显示关闭按钮默认：false类型：(Boolean)

$M({
    title: 'MDialog Title',
    untitle: true,
    unclose: true,
    time: 3,
    content: '三秒后自动关闭弹窗。'
});

[width] 说明：设置对话框宽度默认：'auto'类型：(String)

$M({
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    width: '300px'
});

[height] 说明：设置对话框高度默认：'auto'类型：(String)

$M({
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    height: '300px'
});

[padding] 说明：设置对话框填充默认：'20px 15px'类型：(Number, String)

$M({
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    padding: 50,
    ok: function(){
        this.padding( '20px 15px' );
    }
});

[init:function()] 说明：对话框载入完毕回调的函数默认：null类型：(function(){})

$M({
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    init: function(){
        alert('载入对话框完毕后弹出');
    }
});

[close:function()] 说明：对话框关闭时回调的函数默认：null类型：(function(){})

$M({
    content: '<p>欢迎使用 MDialog 对话框！</p>',
    close: function(){
        alert('对话框关闭后弹出');
    }
});

[id] 说明：设置对话框ID，防止重复弹出对话框默认：null类型：(String)

$M({
    content: '请重复点击运行按钮，只弹一个对话框哦！',
    id: 'text'
});

[resize] 说明：是否绑定 resize 事件，并调整对话框位置默认：true类型：(Boolean)

$M({
    content: '请调整浏览器窗口大小！对话框都在中间',
    width: '300px',
    height: '300px'
});

[drag] 说明：是否支持拖拽功能默认：true类型：(Boolean)

$M({
    content: '我关闭了拖拽功能',
    drag: false
});

[lock] 说明：是否开启锁屏默认： false类型：(Boolean)

$M({
    content: '我开启了锁屏，双击锁屏任意位置，关闭对话框',
    lock: true
});

[background] 说明：设置锁屏背景色默认： #000类型：(String)

$M({
    content: '我改变了锁屏背景色！',
    background: '#2f7bb6',
    lock: true
});

[opacity] 说明：设置锁屏透明度默认： 0.7类型：(Number)

$M({
    content: '我改变了锁屏透明度！',
    opacity: 0.3,
    lock: true
});

[fixed] 说明：设置对话框是否为绝对定位默认： false类型：(Boolean)

$M({
    content: '拖动滚动条试一试',
    lock: true,
    fixed: true
});

[esc] 说明：设置键盘Esc键关闭对话框默认： true类型：(Boolean)

$M({
    content: '按下Esc键，关闭我！',
    esc: true
});

[time] 说明：设置自动关闭对话框时间默认： null类型：(Number)

$M({
    content: '三秒后自动关闭对话框',
    time: 3
});

[left] 说明：设置对话框距窗口左边的位置默认： '50%'类型：(String)

//像素为单位

$M({
    content: '欢迎使用 MDialog 对话框！',
    left: '100px'
});

//百分比为单位

$M({
    content: '欢迎使用 MDialog 对话框！',
    left: '100%'
});

[top] 说明：设置对话框距窗口上边的位置默认： '38.2%' 设置 38.2% 是为了采用窗口的黄金比例类型：(String)

//像素为单位

$M({
    content: '欢迎使用 MDialog 对话框！',
    top: '100px',
    left: '100px'
});

//百分比为单位

$M({
    content: '欢迎使用 MDialog 对话框！',
    top: '100%',
    left: '100%'
});

[zIndex] 说明：设置对话框的层级默认： 1992 切勿超过游览器最大值类型：(Number)

$M({
    content: '欢迎使用 MDialog 对话框！',
    zIndex: 1999
});

[ok:function()] 说明：设置对话框确定按钮的回调函数默认： null 则不显示按钮类型：(function(){})

//设置function类型则点击不会关闭对话框，并且执行Function，Function 里的 this 指针指向 MDialog，即对话框本身对象。

$M({
    content: '欢迎使用 MDialog 对话框！',
    ok: function(){
    	this.lock();
        alert('你点击了按钮');
    }
});

//设置为其它任何类型，点击按钮都是关闭对话框

$M({
    content: '欢迎使用 MDialog 对话框！',
    ok: true
});

[cancel:function()] 说明：设置对话框取消按钮的回调函数默认： null 则不显示按钮类型：(function(){})

//设置function类型则点击不会关闭对话框，并且执行Function，Function 里的 this 指针指向 MDialog，即对话框本身对象。
//它和参数 Ok 只是在按钮焦点上不一样，Ok是表示得到焦点，cancel 没有得到焦点

$M({
    content: '欢迎使用 MDialog 对话框！',
    cancel: function(){
    	this.lock();
        alert('你点击了按钮');
    }
});

//设置为其它任何类型，点击按钮都是关闭对话框

$M({
    content: '欢迎使用 MDialog 对话框！',
    cancel: true
});

[okVal] 说明：设置对话框确定按钮的文字默认： '确定'类型：(String)

$M({
    content: '欢迎使用 MDialog 对话框！',
    ok: function(){
       alert(1);
    },
    okVal: '点击我'
});

[cancelVal] 说明：设置对话框取消按钮的文字默认： '取消'类型：(String)

$M({
    content: '欢迎使用 MDialog 对话框！',
    cancel: function(){
       this.close();
    },
    cancelVal: '关闭我'
});

[button] 说明：插入一个自定义按钮。配置参数成员如下表格默认： null类型：(Array)

名称	类型	描述
name	String \|\| Element	要显示的按钮文字或 HTML Code
callback	Function	(可选) 回调函数this指向MDialog对象，若不设置则点击销毁对话框
focus	Boolean	(默认值:false) 是否自动聚焦
disabled	Boolean	(默认值: false) 是否禁用

$M({
    content: '欢迎使用 MDialog 对话框！',
    button: [
        {
            name: '同意',
            callback: function () {
                this.content('你同意了，2秒后自动关闭').time(2);
                return false;
            },
            focus: true
        },
        {
            name: '<strong style="font-weight: bold; color: red;">不同意</strong>',
            callback: function () {
                alert('你不同意')
            }
        },
        {
            name: '无效按钮',
            disabled: true
        },
        {
            name: '关闭我'
        }
    ]
});

[iframe] 说明：引入一个 iframe 内容默认： false类型：( String )

//在设置 iframe 内容时，content: 参数只需要填写网址即可，如果是跨越请求则需要设置弹窗的宽高，无法自适应获取iframe的宽高
//如果是同域名下iframe，可以获取宽高，在 FireFox 下会有最小高度（建议设置宽高来解决）

//如何在 iframe 中获取当前的 MDialog（勿跨域）
var d = top.$M.getIframe(window.name);

//此时变量 d 就会有当前 MDialog 所有的方法如：
//这里为什么用 top(window.top) 而不用 parent(window.parent)
//因为很有可能 ifrmae 嵌套 iframe 从而导致获取不到顶层的 MDialog 对象
d.lock().width(500);

//top.$M.getIframe(window.name)用法，参考iframe.html代码

$M({
    title: 'iframe 调用',
    iframe: true,
    padding: 0,
    top: '50%',
    fixed: true,
    close: function(){
        var doc = this.data; 
        $M({ 
            content: doc.getElementById('text1').value
        });
    },
    oniframeload: function(doc){
        this.data = doc;
    },
    content: 'iframe.html'
});

//引用其它域名

$M({
    title: '百度一下，你就知道',
    content: 'http://www.baidu.com',
    top: '50%',
    untitle: true,
    padding: 0,
    width: '800px',
    height: '500px',
    iframe: true,
    fixed: true
});

[oniframeload: function( doc )] 说明：iframe 载入完成后回调函数，此参数只有设置 iframe: true, 才能执行类型(function)

//function( doc ){}; doc 参数等于 iframe.document, 而非当前文档中的 document 请务必区分

$M({
    title: 'iframe 调用',
    iframe: true,
    padding: 0,
    top: '50%',
    fixed: true,
    close: function(){
        var doc = this.data; 
        $M({ 
            title: '数据是从 iframe 传出',
            content: doc.getElementById('text1').value
        });
    },
    oniframeload: function(doc){
        this.data = doc;
        this.lock();
        alert('iframe 载入完成在 锁屏');
    },
    content: 'iframe.html'
});

[data] 说明：用于协助在MDialog对象中传递数据默认(null)

$M({
    title: 'MDialog',
    content: '欢迎使用MDialog，点击传递按钮传数据',
    okVal: '绑定数据',
    ok: function(){
        var info = {
            author: 'M.J',
            url: 'http://webjyh.com'
        };
        this.data = info;
        alert('数据已绑定');
    },
    cancelVal: '获取数据',
    cancel: function(){
        if (this.data){
            alert( '作者：'+this.data.author + '\n' + 'URL：'+ this.data.url );
        } else {
            alert('数据未绑定');
        }
    }
});

//data 参数更使用于 iframe 之间的数据传递

$M({
    title: 'iframe 调用',
    iframe: true,
    padding: 0,
    top: '50%',
    fixed: true,
    close: function(){
        var doc = this.data; 
        $M({ 
            title: '数据是从 iframe 传出',
            content: doc.getElementById('text1').value
        });
    },
    oniframeload: function(doc){
        this.data = doc;
        this.lock();
        alert('iframe 载入完成在 锁屏');
    },
    content: 'iframe.html'
});

扩展方法

[title( val )] 说明：设置对话框标题方法，支持链式调用类型：(String)

var m = $M({
    title: '我是默认标题',
    content: '请点击确定按钮改变标题',
    ok: function(){
        this.title('我改变了标题');
    }
});
m.title('我是新标题');

[untitle( Boolean )] 说明：设置对话框隐藏标题，并且设置是否显示关闭按钮，支持链式调用默认： false类型：(Boolean)

//显示关闭按钮

var m = $M({
    title: '我是默认标题',
    content: '我隐藏了标题！',
    fixed: true,
    padding: '10px 20px'
});
m.untitle();

//隐藏关闭按钮

var m = $M({
    title: '我是默认标题，3秒后自动关闭',
    content: '我隐藏了标题和关闭按钮！',
    fixed: true,
    padding: '10px 20px'
});
m.untitle(true).time(3);

[content( HTML )] 说明：设置对话框内容方法，支持链式调用类型：(HTMLElement)

var m = $M({
    content: '欢迎使用 MDialog 对话框！',
    ok: function(){
        this.title('提交中...').content('<p><input type="text" value="你点击了按钮,顺便把标题也换了" /></p>');
    }
});
m.content('我改变了对话框的内容');

[msg( HTML )] 说明：以气泡的方式显示对话框，不显示标题和底部，支持链式调用类型：(HTMLElement)

$M().msg('我是气泡对话框').time(3);

[statusbar( HTML )] 说明：设置对话框底部内容方法，支持链式调用类型：(HTMLElement)

var m = $M({
    content: '欢迎使用 MDialog 对话框！请点击确定按钮',
    ok: function(){
        this.title('提交中...').statusbar('<label><input type="checkbox">不再提醒</label>');
    }
});
m.statusbar('我是底部文字');

[time( Number )] 说明：设置对话框自动关闭方法，支持链式调用类型：(Number)

var m = $M({
    content: '三秒钟自动关闭对话框。'
});
m.time(3);

[close( callback )] 说明：设置对话框关闭方法，并支持关闭回调函数，支持链式调用类型：(function(){})

$M({
    content: '欢迎使用 MDialog 对话框！',
    ok: function(){
        this.close( function(){
            alert('我是回调函数');
        });
    }
});

[lock()] 说明：设置对话框锁屏方法，支持链式调用类型：(null)

var m = $M({
    content: '点击确定按钮关闭锁屏',
    ok: function(){
        this.unlock();
    }
});
m.lock();

[unlock()] 说明：设置对话框解除锁屏方法，支持链式调用类型：(null)

$M({
    content: '点击确定按钮关闭锁屏',
    lock: true,
    ok: function(){
        this.unlock();
    }
});

[width( val )] 说明：设置对话框的宽度方法，支持链式调用类型：(Number, String)

//数字类型和默认值

var m = $M({
    content: '点击确定按钮改变对话框宽度！',
    ok: function(){
        this.width('auto');
    }
});
m.width(400);

//字符串和其它单位

var m = $M({
    content: '点击确定按钮改变对话框宽度！',
    ok: function(){
        this.width('200px');
    }
});
m.width('30em');

[height( val )] 说明：设置对话框的高度方法，支持链式调用类型：(Number, String)

//数字类型和默认值

var m = $M({
    content: '点击确定按钮改变对话框高度！',
    ok: function(){
        this.height('auto');
    }
});
m.height(300);

//字符串和其它单位

var m = $M({
    content: '点击确定按钮改变对话框高度！',
    ok: function(){
        this.height('100px');
    }
});
m.height('20em');

//同时设置高和宽

var m = $M({
    content: '同时设置对话框宽高',
    ok: function(){
        this.width('auto').height('auto');
    }
});
m.width(300).height(200);

[padding( val )] 说明：设置对话框填充方法，支持链式调用类型：(Number, String)

//数字类型

var m = $M({
    content: '点击确定按钮重新设置填充值',
    ok: function(){
        this.padding(20);
    }
});
m.padding(0);

//设置字符串类型

var m = $M({
    content: '点击确定按钮重新设置填充值',
    ok: function(){
        this.padding('20px 15px');
    }
});
m.padding('5em');

[position( top, left )] 说明：设置对话框填充方法，支持链式调用类型：(Number, String)

//数字类型和默认值

var m = $M({
    content: '点击确定按钮重新设置位置',
    ok: function(){
        this.position( '50%', '50%' );
    }
});
m.position(100, 100);

//字符串类型和其它单位

var m = $M({
    content: '欢迎使用 MDialog 对话框！',
    ok: function(){
        this.position( 0 , 0 );
    }
});
m.position( '100%', 0 );

//九个方向的弹窗位置

$M({
    top: '50%',
    fixed: true,
    content: "欢迎使用 MDialog 对话框！",
    button:[
        {
            name: '↖',
            callback: function(){
                this.position( 0, 0 );
            }
        },
        {
            name: '↑',
            callback: function(){
                this.position( 0, '50%' );
            }
        },
        {
            name: '↗',
            callback: function(){
                this.position( 0, '100%' );
            }
        },
        {
            name: '←',
            callback: function(){
                this.position( '50%', 0 );
            }
        },
        {
            name: '*',
            focus: true,
            callback: function(){
                this.position( '50%', '50%' );
            }
        },
        {
            name: '→',
            callback: function(){
                this.position( '50%', '100%' );
            }
        },
        {
            name: '↙',
            callback: function(){
                this.position( '100%', 0 );
            }
        },
        {
            name: '↓',
            callback: function(){
                this.position( '100%', '50%' );
            }
        },
        {
            name: '↘',
            callback: function(){
                this.position( '100%', '100%' );
            }
        }
    ]
});

[button( Array )] 说明：增加自定义按钮方法，支持链式调用类型：(Array)

此方法配置成员请参见配置参数 [button]

var m = $M({
    content: '欢迎使用 MDialog 对话框！'
});
m.button([
    {
        name: '同意',
        callback: function () {
            this.content('你同意了，2秒后自动关闭').time(2);
            return false;
        },
        focus: true
    },
    {
        name: '不同意',
        callback: function () {
            $M({ fixed: true })
                .title('你不同意')
                .content('你不同意我就在增加一个弹窗')
                .lock()
                .button([
                    { name: '关闭我' }
                ]);
        }
    },
    {
        name: '无效按钮',
        disabled: true
    },
    {
        name: '关闭我'
    }
]);

程序说明

1.本人也是在学习 JavaScript ，程序在使用时避免不了出现意外的Bug和缺少功能。

2.在使用前，请认真阅读插件文档。

3.如本插件有幸应用到你的项目中，谢谢你的支持。

4.程序兼容性: 理论兼容IE6+，Google Chrome, FireFox，但在IE6下难免会出现以外的Bug。

5.意见反馈: 如有一些使用问题或者插件的Bug，请到联系作者里联系我

更新说明

Update Ver 2.2 (2014-11-30)

1. 修复 button 方法直接传入 html 不显示的问题

2. 修复 $M().Msg() 方法下下样式问题

Update Ver 2.1.1 (2014-11-04)

1. 修正 jQuery ui Dialog 样式冲突的问题

2. 修复锁屏高度计算出错问题

Update Ver 2.1 (2014-10-30)

此版本增加了 iframe 载入事件和数据相互之间传递，及一些弹窗细节修改

1. 增加 iframe 载入完成后的事件 oniframeload 详情参考API oniframeload 参数

2. 增加 MDialog 数据之间传递功能 data 参数详情参考API data 参数

3. 修改弹窗弹出 CSS3 动画

4. 修正 iframe Loading 界面样式出错问题

Update Ver 2.0 (2014-10-09)

此版本增加了 iframe 框架功能，及一些弹窗细节修改

1. 增加了弹窗的最小宽和高度

2. 增加了气泡对话框简洁方法 $M().msg( content ); 详情参考API msg() 方法

3. 增强引用 iframe 框架功能，在不跨域情况下，弹窗宽高自适应，如有设定宽高，按设定的来

4. 增加 $M.getIframe(window.name) 方法用于获取当前 iframe 的弹窗对象详情参见API iframe 参数

5. iframe 具体用法可参考 Demo 案例中的 iframe.html 页面

6. 增加 iframe loading 交互

7. 废除了$M.iframe() 的方法

8. 增强了 $M.content() 方法的健壮性，支持 HTMLElement

Update Ver 1.1 (2014-07-22)

1. 增加 untitle, unclose, iframe 配置参数

2. 增加 untitle( Boolean ), iframe( URL ) 方法

3. 支持 AMD的方式加载如 require.js

4. 修正若干 Bug

5. 新增加的配置参数和方法，请到Demo页查看具体使用方法

作者 M.J

作者：M.J

Blog：http://webjyh.com

邮箱：jiangiablog@gmail.com

Weibo：http://weibo.com/webjyh/

GitHub：https://github.com/webjyh

留言反馈：可以在Blog中留言，或者发送邮件。