微客导航 » 文章资讯 » js用类封装pop弹窗组件

js用类封装pop弹窗组件

2023-09-23 16:23:54 158

下面的弹出框组件使用的是类来封装的。一个弹窗组件通过new一个实例来生成。

下面直接上代码：

html结构：









显示弹窗

温馨提示

登录后才能参与活动哦！
自动登录跳转中......

pop.js代码：

//Pop的构造函数
varPop=function(wrap,option){
var$this=this;
varopt={
closeCall:null
};
$.extend(opt,option);
varmask=wrap.find(".mask");
//特权方法：1、open()；2、close()；3、setPrize（）；4、setContent（）控制弹窗内显示的内容
this.open=function(){
wrap.show();
mask.show();
};
this.close=function(callbalck){
wrap.hide();
mask.hide();
opt.closeCall&&callbalck();
};
this.setPrize=function(text){
wrap.find(".js-prize").text(text);
};
this.setContent=function(text){
wrap.find(".js-content").text(text);
};
functionevents(){
wrap.on("click",".close",function(e){
e.stopPropagation();
$this.close(opt.closeCall);
});
}
events();
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js用类封装pop弹窗组件

热门推荐

随机推荐