项目演示地址:https://liaojunhongyue.github.io/popup/popup.html
项目源码:https://github.com/liaojunhongyue/popup
该弹窗插件基于jQuery,提供了普通信息弹窗及信息确认弹窗。
普通信息弹窗可配置弹窗的类型、标题、内容、字体颜色、背景颜色、弹窗宽高、是否自动关闭以及自动关闭时间、用户点击自动关闭后调用的回调函数。
信息确认弹窗除普通信息弹窗可配置的外,还可配置按钮的文字和样式,以及用户点击按钮后调用的回调函数。
目前提供的弹窗类型:
一、普通信息弹窗:
1、弹窗不能自动隐藏;
2、弹窗可以在指定毫秒数隐藏;
3、弹窗可设置具体的宽高及样式;
4、关闭弹窗可调用回调函数。
例如:(调用方式如下)
$('#popupC').click(function(){
var popup = new Popup({
'type': 'info', // 弹窗类型
'title': '提示信息', // 标题
'text': '点击关闭按钮后,可调用回调函数', // 内容
'closeCallBack': function(){
alert('调用回调函数'); // 回调
}
})
})
二、信息确认弹窗
1、可配置按钮的样式及文字;
2、可配置回调函数。
例如:(调用方式如下)
$('#popupG').click(function(){
var popup = new Popup({
'type': 'submit',
'title': '样式及文字',
'text': '可配置按钮的样式及文字的弹窗',
'cancelbutton': true,
'submitvalue': '同意',
'submitcolor': '#fff',
'submitbgcolor': '#0088cc',
'submitbordercolor': '#007fbe',
'cancelvalue': '不同意',
'cancelcolor': '#0088cc',
'cancelbgcolor': '#fff',
'cancelbordercolor': '#0088cc',
'closeCallBack': function(){
alert('点击了关闭')
},
'submitCallBack': function(){
alert('点击了确认')
}
})
})