源码下载:链接: https://pan.baidu.com/s/1MTSxq3M82xCztXseEGsgKA 提取码: jk7v 复制这段内容后打开百度网盘手机App,操作更方便哦
演示地址:http://www.shishangshow.top/show/chajian/easydialog/demo.html
var btnFn = function(){
alert( e.target );
return false;
};
easyDialog.open({
container : {
header : '弹出层标题',
content : '欢迎使用easyDialog : )',
yesFn : btnFn,
noFn : true
}
});
默认的HTML模板分成3个部分
header:包含弹出层的标题和关闭按钮
conent:包含弹出层的内容
footer:包含确定和取消按钮
如果header没有内容将不显示,content必须要有内容,footer没有2个按钮也不显示。
yesFn:确定按钮的回调函数,回调函数返回false将不关闭弹出层。
noFn:取消按钮的回调函数,回调函数返回false将不关闭弹出层,取消按钮的回调函数也同样会绑定在关闭按钮上,如果参数不是函数而是true,那么取消按钮就只有关闭弹出层的功能。
如果没有给按钮传回调函数,按钮将不显示。
运行
easyDialog.open({
container : {
content : '弹出层将在2秒后关闭...'
},
autoClose : 2000
});
默认模板如果只有content有内容,将不显示header和footer部分,将显示最简模式。
autoClose:自动关闭窗口,单位为毫秒(ms)。
运行
easyDialog.open({
container : 'imgBox',
autoClose : 2000,
fixed : false
});
自定义弹出层时,需要先将HTML结构添加到页面中,然后设置其隐藏(display:none),传参必须为id。
fixed:该参数为false时,弹出窗口为绝对定位(不跟随页面的滚动而滚动),为true时,弹出窗口为固定定位(跟随页面的滚动而滚动)。
运行
easyDialog.open({
container : {
header : '没有遮罩层',
content : '欢迎使用easyDialog : )'
},
overlay : false
});
overlay:该参数为false时,将不显示遮罩层,没有遮罩层的情况下可以方便对页面继续进行操作。
运行
easyDialog.open({
container : {
header : '跟随定位',
content : '弹出窗口可以跟随某元素绝对定位'
},
follow : 'demoBtn5',
followX : -137,
followY : 24
});
follow:被跟随元素,参数可以是元素的id,也可以是DOM对象。
followX:相对于被跟随元素的X轴偏移。
followY:相对于被跟随元素的X轴偏移。
运行
easyDialog.open({
container : {
header : '关闭拖拽',
content : '欢迎使用easyDialog : )'
}
drag : false
});
drag:该参数为false时将关闭拖拽的功能。
如果是自定义弹出层,要实现拖拽需要满足2个条件,首先要确保drag为true,然后需要一个id为“easyDialogTitle”的DOM元素。
运行
easyDialog.close();
调用easyDialog.close()方法可以关闭当前的弹出层,另外使用ESC键也可以关闭弹出层,如果不想使用ESC键来关闭弹出层设置lock为true即可。
如果是自定义弹出层,也想使用关闭按钮来关闭弹出层,除了给该按钮手动绑定一个关闭弹出层的方法外,还可以添加一个id为“closeBtn”的DOM元素,这样不绑定事件就也可以关闭弹出层。
var callFn = function(){
alert( 'hello' );
};
easyDialog.open({
container : {
header : '回调函数',
content : '欢迎使用easyDialog : )'
},
callback : callFn
});
callback:设置弹出层关闭后执行的回调函数。
运行
参数 | 参数类型 | 默认参数 | 参数说明 |
---|---|---|---|
container | String / Object | null | 弹出窗口内容 参数为DOM元素的id,那么弹出层内容将是自定义的,如果是object将自动创建一个默认的弹出层内容模板。 内容模板的参数: header:弹出层的标题,并包含了关闭按钮,如果没有参数将不显示。 content:弹出层的内容,参数可以是字符串,也可以是HTML代码。 yesFn:确定按钮的回调函数,回调函数返回false将不关闭弹出层,回调函数的this指向easyDialog,无参数将不显示按钮。 noFn:取消按钮的回调函数,回调函数返回false将不关闭弹出层,回调函数的this指向easyDialog,该回调函数也同样会绑定在关闭按钮上,如果参数不是函数而是true,那么取消按钮仅有关闭弹出层的功能,无参数将不显示按钮。 yesText:确定按钮的文本,默认为“确定”。 noText:取消按钮的文本,默认为“取消”。 |
drag | Boolean | true | 拖拽效果 true:启用拖拽效果。 false:禁用拖拽效果。 自定义弹出层,要实现拖拽需要满足2个条件,首先要确保drag参数为true,然后需要一个id为“easyDialogTitle”的DOM元素。 |
fixed | Boolean | true | 设置定位 true:固定定位,弹出窗口跟随页面滚动而滚动。 false:绝对定位,弹出窗口不跟随页面的滚动。 |
overlay | Boolean | true | 设置遮罩层 true:显示遮罩层,不可对页面其他元素进行操作。 false:不显示遮罩层,可以对页面其他元素进行操作。 |
follow | String / Object | null | 跟随定位 设置弹出窗口跟随某元素进行绝对定位,跟随定位时将不显示遮罩层,参数可以是元素id也可以是DOM对象。 |
followX | Number | 0 | 设置跟随定位时,相对于被跟随元素的X轴偏移,单位为px,传参时无需带单位。 |
followY | Number | 0 | 设置跟随定位时,相对于被跟随元素的Y轴偏移,单位为px,传参时无需带单位。 |
lock | Boolean | false | 锁定弹出层 true:ESC键不可以关闭弹出层。 false:ESC键可以关闭弹出层。 |
autoClose | Number | 0 | 设置弹出层自动关闭,单位为ms,传参时无需带单位。 |
callback | Function | null | 设置关闭弹出层后执行的回调函数,this指向easyDialog。 |
如果要自定义默认模板的样式,可以修改下载文档中的easydialog.css文件,下面是相应的HTML源码部分:
×
弹出层标题
欢迎使用easyDialog : )