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)与我们联系处理,敬请谅解!


                    


















