html弹窗组件,js用类封装pop弹窗组件

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

下面直接上代码：

html结构：

Meta charset="UTF-8">

显示弹窗

提示

登录后才能参与活动哦！

自动登录跳转中......

pop.js代码：

函数

var Pop=function(wrap,option){

var $this=this;

var opt={

closeCall:null

};

$.extend(opt,option);

var mask=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);

};

function events(){

wrap.on("click",".close",function(e){

e.stopPropagation();

$this.close(opt.closeCall);

});

}

events();

};

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

总结

以上是编程之家为你收集整理的js用类封装pop弹窗组件全部内容，希望文章能够帮你解决js用类封装pop弹窗组件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！