popup.js是一款兼容IE8的jQuery弹窗插件。该jquery弹窗样式简洁,可实现自动隐藏,点击按钮触发回调函数等功能。
使用方法
在页面中引入popup.css、jquery以及popup.js文件。
<link rel="stylesheet" href="css/popup.css">
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
初始化插件
1、实现普通的消息弹窗(不能自动关闭)
$('#popupA').click(function(){
var popup = new Popup({
'type': 'info',
'title': '提示信息',
'text': '此弹窗为普通信息弹窗,需点击关闭按钮进行关闭'
});
})
2、实现普通信息弹窗(弹窗可以自动隐藏)
$('#popupB').click(function(){
var popup = new Popup({
'type': 'info',
'title': '提示信息',
'text': '此弹窗为普通信息弹窗,2秒钟之后自动关闭',
'color': '#fff',
'bgcolor': '#213bfd',
'autohide': true,
'showtime': 2000
});
})
3、带回调函数的普通信息弹窗(点击关闭按钮调用回调函数)
$('#popupC').click(function(){
var popup = new Popup({
'type': 'info',
'title': '提示信息',
'text': '点击关闭按钮后,可调用回调函数',
'closeCallBack': function(){
alert('调用回调函数');
}
})
})
4、设置了具体宽高的普通信息弹窗,有具体的宽高,但css中设置了弹窗的最小宽度和最小高度,如果设置的宽高小于最小宽高,将按照最小宽高显示。
$('#popupD').click(function(){
var popup = new Popup({
'type': 'info',
'title': '提示信息',
'text': '设置了具体宽高的普通信息弹窗',
'width': '350px',
'height': '200px'
})
})
5、信息确认弹窗
$('#popupE').click(function(){
var popup = new Popup({
'type': 'submit',
'title': '请您确认',
'text': '将确认的具体信息填写在此处'
})
})
6、带有确认和取消两个按钮的信息确认弹窗
$('#popupF').click(function(){
var popup = new Popup({
'type': 'submit',
'title': '确认或取消',
'text': '带有确认或取消两个按钮的信息确认弹窗',
'cancelbutton': true
})
})
7、可配置按钮样式及文字
$('#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'
})
})
8、带有回调函数的信息确认弹窗
$('#popupH').click(function(){
var popup = new Popup({
'type': 'submit',
'title': '回调函数',
'text': '带有回调函数的信息确认弹窗',
'cancelbutton': true,
'closeCallBack': function(){
alert('点击了关闭')
},
'submitCallBack': function(){
alert('点击了确认')
}
})
})
popup.js兼容IE8的jQuery弹窗插件的github地址为:https://github.com/liaojunhongyue/popup






![MBTI 16型人格职业性格测试源码PC+H5自适应完整版基于ThinkPHP框架[亲测可用]](https://www.icbot.net/upload/portal/20250429/32ccad646f32a5f4926b3b7b5ef3232a.png)















