完美兼容IE8的jQuery弹窗插件

简要教程

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('点击了确认')
        }
    })
})