js用类封装pop弹窗组件

前端之家收集整理的这篇文章主要介绍了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(); };

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

原文链接:https://www.f2er.com/js/35963.html

猜你在找的JavaScript相关文章