jQuery弹出框插件Dialog

 查看演示  website  立即下载

更新时间：2017/8/11 下午9:48:35

更新说明：在这里非常抱歉；开始没有思考好；部分事件绑定和回调；导致在项目中会出现多次绑定事件；触发事件的现象；

下面时我在实际项目实现过程中；对api和配置文件的优化；

第一 添加两个按钮；如果两个按钮同时存在点击都会关闭弹出框；第一个按钮触发close事件；第二个按钮才会触发remove事件；如果只有一个按钮那么点击就会直接触发remove事件；这样这的好处是我们可以对应处理不同事件做不同的处理在关闭弹出框后；

第二 我们还添加父元素的可选项；这样为了满足弹出框在不同地方展现；

第三 我们可以直接 用变了去保存我们弹出框构造函数这样就可以直接调用hide（参数）方法去隐藏；这样做的最大好处就是我们可以实现更加方便的控制我们的弹出层；

第四在出现弹出层后我们禁止页面发生滚动；反正页面出现滚动导致偏差

以上这些都是我在项目中开发时使用发现的问题并解决；项目已上线；每天点击次数达到上万次；这是一个值得使用的插件；我会一直更新优化代码

更新时间：2017-8-9 09:54:44

更新说明：api 代码 和配置参数优化

更新时间：2017-8-8 19:03:11

更新说明：

this.box = options.box||'body';//tip/dialog:表示提示框内容要展示的容器
this.dom = options.dom||'';//tip:表示提示框内容 dialog:表示弹出框内容
this.type = options.type||'tip';//判断类型
this.content = options.content||'content';//提示框独有 表示提示框的内容
this.effectIn = options.effectIn||'';//进入时候的动画
this.effectOut = options.effectOu||'';//离开时的动画
this.hasMask = options.hasMask||true;//是否有遮罩层
this.time = options.time||1000;// 提示框独有 tips框隐藏的时间
this.closeBtn = options.closeBtn||'';//关闭按钮class id
this.listener = {};
this.handler = [];
this.show();

重写了js 代码；api和配置都没有改变；添加了新的配置

this.box = options.box||'body';

新的配置我们弹框和弹出层的弹出位置；

提供关闭按钮的配置；

提供了支持是否需要mask遮罩层---传入空字符串为不需要

tip:new Dialog({})这样就可以实现一个简单的tip提示框

具体的使用方法看我index.html

更新时间：2017-8-8 09:55:51

更新说明：修改弹出框的层级关系；给定z-index:1000;这样就不会出现由于层级关系不一样导致弹出层被覆盖的现象；

Dialog() //是不是很简单我们就可以实现一个tip提示框;
//tip
Dialog({
    dom: "" //（css选择器）可选参数 表示提示框展示的在哪个元素中
    type: 'tips' //可选参数 默认为tips
    content: '' //可选参数表示tips内容
    time: '' //默认是1000ms 表示tips框多长时间消失
    effectIn: '' //表示tips弹出框的出现时动画 可选  可以根据你的需要自定义css3动画（animate.css）
    effectOut: '' //表示tips弹出框的消失时动画 可选  可以根据你的需要自定义css3动画（animate.css）
})
//dialog
Dialog({
            dom: ''
            id选择器 表示我们自定义的dom结构
            type: 'dialog' //必选参数表示为dialog弹框
            closeBtn: ''
            class选择器 可选参数 默认.dialogClose 指定关闭弹框的按钮class
            effectIn: '' //表示tips弹出框的出现时动画 可选  可以根据你的需要自定义css3动画（animate.css）
            effectOut: '' //表示tips弹出框的消失时动画 可选  可以根据你的需要自定义css3动画（animate.css）
            hasMask: '' //布尔值 表示是否需要遮罩层 默认true
            我们提供的监听方法
            var dialog = Dialog({
                type: 'tips'
            });
            dialog.on('param', callback) //param 有close remove 表示分别监听弹出框显示隐藏
            dialog.hide(callback) //弹出框隐藏
            我们提供链式调用
            var dialog = Dialog({
                type: 'tips'
            });
            dialog.show(function() {
                console.log('我们显示了')
            }).
            on('close', function() {
                console.log('我们监听到弹出框显示')
            }).
            hide(function() {
                console.log('我们关闭了')
            }).
            on('remove', function() {
                console.log(console.log('我们监听到弹出框隐藏'))
            })

我们可以自已自定义动画,当然我们也可以使用animate.css实现动画；

PREVIOUS:
NEXT:
纯css标题菜单
Matrix3d坐标自动生成