基于jQuery的弹窗插件

项目演示地址:https://liaojunhongyue.github.io/popup/popup.html

项目源码:https://github.com/liaojunhongyue/popup

该弹窗插件基于jQuery,提供了普通信息弹窗及信息确认弹窗。

普通信息弹窗可配置弹窗的类型、标题、内容、字体颜色、背景颜色、弹窗宽高、是否自动关闭以及自动关闭时间、用户点击自动关闭后调用的回调函数。

信息确认弹窗除普通信息弹窗可配置的外,还可配置按钮的文字和样式,以及用户点击按钮后调用的回调函数。

目前提供的弹窗类型:

一、普通信息弹窗:

1、弹窗不能自动隐藏;

2、弹窗可以在指定毫秒数隐藏;

3、弹窗可设置具体的宽高及样式;

4、关闭弹窗可调用回调函数。

例如:(调用方式如下)

$('#popupC').click(function(){

    var popup = new Popup({

        'type': 'info',  // 弹窗类型

        'title': '提示信息', // 标题

        'text': '点击关闭按钮后,可调用回调函数', // 内容

        'closeCallBack': function(){

            alert('调用回调函数'); // 回调

        }

    })

})

二、信息确认弹窗

1、可配置按钮的样式及文字;

2、可配置回调函数。

例如:(调用方式如下)

$('#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',

        'closeCallBack': function(){

            alert('点击了关闭')

        },

        'submitCallBack': function(){

            alert('点击了确认')

        }

    })

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容