当前位置：首页 > 网页特效 > 弹出层

兼容IE8的jQuery弹窗插件

分类：弹出层日期：2024-05-14 点击(4) 评论(0)

兼容IE8的jQuery弹窗插件

简介

在页面中引入popup.css、jquery以及popup.js文件。

```html
<link rel="stylesheet" href="css/popup.css">
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
```
#####  初始化插件
1、实现普通的消息弹窗（不能自动关闭）

```html
$('#popupA').click(function(){
    var popup = new Popup({
        'type': 'info',
        'title': '提示信息',
        'text': '此弹窗为普通信息弹窗，需点击关闭按钮进行关闭'
    });
})
```
2、实现普通信息弹窗（弹窗可以自动隐藏）

```html
$('#popupB').click(function(){
    var popup = new Popup({
        'type': 'info',
        'title': '提示信息',
        'text': '此弹窗为普通信息弹窗，2秒钟之后自动关闭',
        'color': '#fff',
        'bgcolor': '#213bfd',
        'autohide': true,
        'showtime': 2000
    });
})
```
3、带回调函数的普通信息弹窗（点击关闭按钮调用回调函数）

```html
$('#popupC').click(function(){
    var popup = new Popup({
        'type': 'info',
        'title': '提示信息',
        'text': '点击关闭按钮后，可调用回调函数',
        'closeCallBack': function(){
            alert('调用回调函数');
        }
    })
})
```
4、设置了具体宽高的普通信息弹窗，有具体的宽高，但css中设置了弹窗的最小宽度和最小高度，如果设置的宽高小于最小宽高，将按照最小宽高显示。

```html
$('#popupD').click(function(){
    var popup = new Popup({
        'type': 'info',
        'title': '提示信息',
        'text': '设置了具体宽高的普通信息弹窗',
        'width': '350px',
        'height': '200px'
    })
})
```
5、信息确认弹窗

```html
$('#popupE').click(function(){
    var popup = new Popup({
        'type': 'submit',
        'title': '请您确认',
        'text': '将确认的具体信息填写在此处'
    })
})
```
6、带有确认和取消两个按钮的信息确认弹窗

```html
$('#popupF').click(function(){
    var popup = new Popup({
        'type': 'submit',
        'title': '确认或取消',
        'text': '带有确认或取消两个按钮的信息确认弹窗',
        'cancelbutton': true
    })
})
```
7、可配置按钮样式及文字

```html
$('#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、带有回调函数的信息确认弹窗

```html
$('#popupH').click(function(){
    var popup = new Popup({
        'type': 'submit',
        'title': '回调函数',
        'text': '带有回调函数的信息确认弹窗',
        'cancelbutton': true,
        'closeCallBack': function(){
            alert('点击了关闭')
        },
        'submitCallBack': function(){
            alert('点击了确认')
        }
    })
})
```

web299.com

兼容IE8的jQuery弹窗插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果