jQuery弹框插件(原创)

 查看演示  website  立即下载

更新时间：2019-11-17 22:43:51

更新说明：版本 2.5（final ）

1、新增添加按键写法，在参数里可添加

cfg: {
        buttons: [{
            name: "确定", //按键名称       
            click: callback //按键事件  
        }...],
        效果和 addButton(name,callback) 方法添加按键一样 
      }

2、添加 zIndex 参数控制弹框层级

3、添加开启关闭的回调事件

myPop.on(type,callback); // type:"afteropen","beforeopen","afterclose"和"beforeclose";

按照jquery的on方法使用习惯配置便可 // callback:回调函数

4、优化写法，缩减代码压缩后的大小      

更新时间：2019/6/22 下午12:19:56版本 v2.0

更新说明：

1、添加内容自定义是否垂直居中

2、添加宽高支持百分比

3、修改了一些参数名称，减少可能隐患（比如：isShowBg 改为 showBackground）

4、修复点击背景关闭弹框导致的bug

5、修复内容展现出现重复的bug

更新时间：2019/1/20 上午20:40:07

更新说明：修复 17号 新版本导致的严重bug(错位)

更新时间：2019/1/17 下午2:12:43

更新说明：版本 v1.3.5

1、细分绝对定位和相对定位

2、优化弹框 z-index 自动化，保证最顶层

3、优化改变弹框的节点

4、添加 获取状态的方法 getStatus()，弹框开启或关闭，弹框位置

5、改变弹框回调事件 on('open/close',callback)，开启或关闭的事件

6、添加点击背景改变弹框

更新时间：2018/12/15 下午2:45:18

更新说明：版本 v1.3.2

1. 新增弹框弹出风格，1、弹出；2、收缩；3、旋转；4、下滑；5、上滑；6、抖动

2. 优化部分代码

更新时间：2018/12/2 下午12:44:09

更新说明：

版本 v1.3.1

1.更改弹框风格

2.修复关闭弹框回调函数bug

3.更改 右上关闭按键和全屏按键 的实现方式，解决多种浏览器的样式兼容问题，去除炫影等效果，只留悬停暗背景

更新时间：2018/11/17 下午4:32:32

更新说明：版本 v1.3    

    1、添加右上按键关闭事件回调方法

    2、添加弹框位置自定义指定

    3、优化使用案例

    4、添加按键移除方法

    5、添加弹框位置获取方法

注意：v1.3和之前版本有10%的差异（扩展了功能后，有些地方代码有冲突，不得不改），不能完全兼容老版本

更新时间：2018/9/25 下午7:38:07

更新说明：
1、修复弹框内容重复bug
2、更改右上关闭按键的默认样式，新增两种样式                   

更新时间：2018/8/8 下午12:54:11

更新说明：

1、修复部分bug

2、添加键盘按键事件，Esc关闭弹框

3、添加放大全屏功能

注：具体使用方法参见js文件的注释部分

更新时间：2018/7/31 下午4:37:29

更新说明：

1、修改默认样式，上一版本默认样式太丑了

2、优化按键添加挤出框的问题，添加按键的宽超出弹框的宽时将自动适配容纳按键

3、添加新参数，弹框是否显示外阴影

4、优化代码写法

发布时间：2018-7-27 0:57

插件-弹框提示(可以展示大内容，也可以是确认框)

使用方法说明：

1.此插件基于jQuery编写，使用时需要先导入jQuery，让后导入我的插件的js文件和插件的css文件

2.获取对象

var myPop = $.initPopop(cfg);

cfg:配置文件如果不设置将使用默认设置

3.设置配置

myPop.setStyle(cfg, status);

cfg:配置文件如果不设置将使用默认设置

status:配置文件的状态（false:在原配置上追加，重复的将覆盖；true:全新覆盖，未配置的将使用默认值），默认值为false

 4.显示提示框

myPop.showPopup(content,title);

content:任意内容，强制水平和垂直居中，可以是选择器，比如：.selector或#selector

title:标题(可选)，若无则使用 cfg 配置中的标题设置，若cfg配置中也没有设置将使用默认值：“消息”

5.关闭提示框

myPop.closePopup();

6.添加底框按钮

myPop.addButton(btnName,callback);

btnName:按键的名称，注：添加的名称含有“关闭，取消”等的将带有点击关闭弹框的事件，

callback(obj):回调函数，参数：obj->当前弹框对象

参数说明：

cfg: {
    width: 弹框的长,
    height: 弹框的高,
    border: 弹框边框设置,
    borderRadius: 边框的圆角大小,
    themeColor: 弹框的主题颜色,
    isShowIcon: 是否显示左上图标,
    默认: true,
    icon: 图标的图片（ 可以是路径， 也可以是图片base64编码）,
    title: 弹框标题,
    buttonAlign: 按键对齐方式， left,
    center和right三种方式,
    isShowBg: 是否显示背景,
    默认: false,
    allowedMove: 是否允许移动,
    默认: false,
    targetSelector: 目标选择器， 用于弹框设置位置的相对节点， 默认： body节点(居中显示)，
    centerOrFollow: 弹框类型设置， 中心显示或跟随指定目标节点（ targetSelector） 显示,
    followPosition: 弹框跟随目标相对位置， 默认： "bottom right" (右下),
    followOffset: 弹框跟随目标相对偏差位置， 默认偏移10px
}

注意：本插件是本人应对自己所在公司需求而编写的，在这里上传给大家使用主要是想壮大我的这款插件，大家如果发现bug还望热情提出，我的邮箱：liang-zhenyu@qq.com

PREVIOUS:
NEXT:
jQuery图片预览插件
Css 3D导航