js组件常用封装方法。。。。。【组件封装】 ★★★★★★ 1月会员日 集人气【弹窗】

公共弹窗js写法:mcake弹窗封装Dialog.js

function Dialog(bg,els,opts) {
    this.$els = $(els);
    this.$Dialogbg = $(bg);
    this.$close = this.$els.find(opts.close);
    this.$btn = this.$els.find(opts.btn);
    this._init();
}
Dialog.prototype={
    _init:function () {
        var self = this;
        this.show();
        this.$Dialogbg.click(function () {
            self.hide();
        });
        this.$close.click(function () {
            self.hide();
        });
        this.$btn.click(function () {
            self.hide();
        });
    },
    show:function () {
        this.$Dialogbg.fadeIn(300);
        this.$els.fadeIn(300);
    },
    hide:function () {
        this.$Dialogbg.fadeOut(300);
        this.$els.fadeOut(300);
    }
};

/*实例化*/
new Dialog(".Dialogbg",'.DialogBox',{
    close:'.closes',
    btn:'.go-use'
});

 

 

posted @ 2019-12-18 10:49  Shimily  阅读(200)  评论(0编辑  收藏  举报