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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!