js弹出框-来谈谈如何开发一个js插件!!

gaoxiaosong1113
gaoxiaosong1113 发布于 6 天前 浏览:127 类型:原创 - 随笔 分类:JavaScript - js插件 二维码: 作者原创 版权保护
最近公司在开发新的H5网站,里面用到了很多的弹出框,本来想偷懒去网上扒一个,但是都没有合适的,只能自己写一个了。

先附上预览地址:戳这里
个人github戳这里有兴趣的加个 follow
有兴趣的加个前端交流群:478688652

需求功能:
  1. 同一个页面可以打开多个弹出框,并且相互不影响
  2. 点击背景关闭弹出层
  3. 确定和取消按钮的回调事件
  4. 可以自定义弹出框的标题和信息

需求出来了,贴源码:~~~~~

 
// 弹出层对话框
    (function ($) {
        'use strict';
        var dialog = function (options) {
            // 判断dialog实例是否存在,不存在的话重新new一个实例
            if (!(this instanceof dialog)) return new dialog(options);
            var _this = this;
            //默认元素
            var dialogOptions = {
                dialogBtn: '.dialog-btn',
                dialogWarp: '.gxs-dialog-warp',
                dialog: '.gxs-dialog',
                dialogMask: '.gxs-dialog-mask',
                dialogBtnDefault: '.gxs-dialog-btn.default',
                dialogBtnPrimary: '.gxs-dialog-btn.primary',
                time: '3s',
                dialogText: '这个是内容',
                dialogTitle: '这个是标题',
                default: function () {
                    // 取消回调
                },
                primary: function () {
                    //确定回调
                }
            };
            //合并传进来的元素
            $.extend(dialogOptions, options);

            this.prototype = {
                //显示方法
                dialogShow: function () {
                    $(dialogOptions.dialogWarp).fadeIn(200);
                    $(".gxs-vh").addClass("filter");
                },
                //移除方法
                dialogRemove: function () {
                    $(dialogOptions.dialogWarp).remove();
                },
                //隐藏方法
                dialogHide: function () {
                    $(dialogOptions.dialogWarp).fadeOut(200, function () {
                        $(".gxs-vh").removeClass("filter");
                        if (dialogOptions.append === true) {
                            _this.prototype.dialogRemove();
                        }
                    });
                }
            };
            //此处如果 dialogOptions.append为true的话,会重新拼接一个弹出框
            if (dialogOptions.append === true) {
                var date = new Date();
                dialogOptions.dialogWarp = '.gxs-dialog-warp-' + date.getTime();
                //此处为拼接的弹出框增加一个唯一的calss,以供区分
                var str = dialogOptions.dialogWarp.substring(1);
                var dialogWarp = $('<div></div>', {
                    class: "gxs-dialog-warp"
                }).appendTo('body').addClass(str);
                var dialogBox = $('<div></div>', {
                    class: "gxs-dialog"
                }).appendTo(dialogWarp);
                var dialogMask = $('<div></div>', {
                    class: "gxs-dialog-mask"
                }).appendTo(dialogWarp);
                var dialogHd = $('<div></div>', {
                    class: "gxs-dialog-hd",
                    html: '<h4 class="gxs-dialog-title">' + dialogOptions.dialogTitle + '</h4>'
                }).appendTo(dialogBox);
                var dialogBd = $('<div></div>', {
                    class: "gxs-dialog-bd",
                    html: '<p>' + dialogOptions.dialogText + '</p>'
                }).appendTo(dialogBox);
                var dialogFt = $('<div></div>', {
                    class: "gxs-dialog-ft"
                }).appendTo(dialogBox);
                var dialogBtnDefault = $('<button></button>', {
                    class: 'gxs-dialog-btn default',
                    text: '取消'
                }).appendTo(dialogFt);
                var dialogBtnPrimary = $('<button></button>', {
                    class: 'gxs-dialog-btn primary',
                    text: "确定"
                }).appendTo(dialogFt);
                dialogOptions.dialogWarp = "." + str;
            }
            
            //执行到这里,说明已经触发了点击事件,默认显示弹出框
            _this.prototype.dialogShow();

            //点击背景
            $(dialogOptions.dialogMask).click(function (event) {
                _this.prototype.dialogHide();
            });

            //点击确定
            $(dialogOptions.dialogBtnPrimary).off("click").click(function () {
                _this.prototype.dialogHide();
                dialogOptions.primary();
            });

            //点击取消
            $(dialogOptions.dialogBtnDefault).off("click").click(function () {
                _this.prototype.dialogHide();
                dialogOptions.default();
            });
        };
        window.dialog = dialog; //暴露给外部,以供调用
    })($);


其实很简单,我想大家看到了这些注释应该就明白了差不多了。

下面贴上结构

<div class="gxs-dialog-warp gxs-dialog-warp-l">
    <div class="gxs-dialog">
        <div class="gxs-dialog-hd">
            <h4 class="gxs-dialog-title">弹窗标题</h4>
        </div>
        <div class="gxs-dialog-bd">
            <p>弹窗内容</p>
        </div>
        <div class="gxs-dialog-ft">
            <button class="gxs-dialog-btn default" data-toggle="modal">取消</button>
            <button class="gxs-dialog-btn primary">确定</button>
        </div>
    </div>
    <div class="gxs-dialog-mask"></div>
</div>


然后是调用方法

//显示默认的弹出框
    $('.dialog-btn').click(function () {
        var dialogAlert = new dialog({
            dialogBtn: this,
            default: function () {
                console.log("取消按钮1")
            },
            primary: function () {
                console.log("确定按钮1")
            }
        })
    });
    
    //生成弹出框
    $('.dialog-btn2').click(function () {
        var dialogAlert2 = new dialog({
            append: true,
            dialogBtn: this,
            dialogText: '提示信息2',
            dialogTitle: '提示标题2',
            default: function () {
                console.log("取消按钮2")
            },
            primary: function () {
                console.log("确定按钮2")
            }
        })
    });
z
给个赞 2 人点赞
收藏 2 人收藏
评论 已有 2 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
gaoxiaosong1113
gaoxiaosong11136 天前2F
bootstrap的模态框不支持复用,得自己改 //@守候你的季节:bootstrap有模态框可以用用,当然加载会慢点
举报 支持 (0) 回复 (0)
守候你的季节
bootstrap有模态框可以用用,当然加载会慢点
举报 支持 (0) 回复 (1)

作者最新