下面的弹出框组件使用的是类来封装的。一个弹窗组件通过新的一个实例来生成。
下面直接上代码:
html结构:
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt; style>/*基本的样式*/按钮{宽度:1.6雷姆;高度:0.5雷姆,字体大小:0.3雷姆;行高:0.5雷姆;背景:红色,颜色:白色,粗细:大胆}
hide{显示:没有;}
.js-pop {
宽度:100%;
高度:100%;
z - index: 100;
位置:绝对的;
上图:0;
左:0;
字体大小:0.24快速眼动;
}
.js-pop .mask {
位置:固定;
上图:0;
左:0;
宽度:100%;
高度:100%;
背景:# 000;
透明度:0.2;
}
.js-pop .content {
位置:固定;
上图:50%;
左:50%;
宽度:5.80快速眼动;
高度:4.81快速眼动;
利润:-2.405雷姆0 0 -2.9快速眼动;
背景:url (“pop-bg.png”)不再重演;
background-size:包含;
颜色:# 262626;
text-align:中心;
}
.js-pop .content .close {
位置:绝对的;
上图:.25rem;
右:.08rem;
宽度:.54rem;
高度:.48rem;
z - index: 4;
光标:指针;
}
.js-pop .content .prize-title {
高度:.39rem;
min-width: 1.77快速眼动;
保证金:.28rem汽车;
行高:0.39快速眼动;
颜色:白色;
text-align:左;
indent: 1快速眼动;
}
.js-pop .content .prize-content {
颜色:# a40000;
字体大小:.24rem;
保证金:0 0.1雷姆0 0.49快速眼动;
行高:0.4快速眼动;
宽度:5.2快速眼动;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;按钮id=" bb "祝辞显示弹窗& lt;/button>
& lt; div class=" js-pop js-prize-pop隐藏”id=皃opLogin”比;
& lt; div类="面具"祝辞& lt;/div>
& lt; div类=澳谌荨北?
& lt; div类=肮乇铡弊４? lt;/div>
& lt; div类=" prize-title "祝辞温馨提示& lt;/div>
& lt; div类=皃rize-content”比;
登录后才能参与活动哦!
& lt; br/比;
自动登录跳转中……
& lt;/div>
& lt;/div>
& lt;/div>
& lt; !——引入jquery——比;
& lt;脚本type=" text/javascript " src=" http://image.37wan.cn/common/js/jquery-1.9.1.min.js "祝辞& lt;/script>
& lt; !——引入流行组件——比;
& lt;脚本src=" https://www.yisu.com/zixun/pop.js "祝辞& lt;/script>
& lt; script>//rem代码
var windowW=$(窗口).width ();
var比率=windowW/640;
$ (“html”) . css(“字形大小”,100 *比+“px”);
$(窗口)。(“调整”,函数(){
var windowW=$(窗口).width ();
var比率=windowW/640;
$ (“html”) . css(“字形大小”,100 *比+“px”);
});//新建一个流行实例
var popLogin=new Pop ($ (" # popLogin "));
$ (" # bb”)。(“点击”,函数(){
popLogin.open ();
});
& lt;/script>
& lt;/body>
& lt;/html>
之前
pop.js代码:
//流行的构造函数
var流行=function(包装,选项){
var=这个美元;
var选择={
closeCall:零
};
.extend美元(选择,选项);
var=wrap.find面具(“.mask”);//特权方法:1、打开();2,关闭();3,setPrize (); 4、setContent()控制弹窗内显示的内容
this.open=function () {
wrap.show ();
mask.show ();
};
this.close=函数(callbalck) {
wrap.hide ();
mask.hide ();
opt.closeCall&, callbalck ();
};
this.setPrize=function(文本){
wrap.find (“.js-prize”)。text(文本);
};
这一点。setContent=function(文本){
wrap.find (“.js-content”)。text(文本);
};
函数的事件(){
wrap.on(“点击”、“.close”、函数(e) {
e.stopPropagation ();
美元this.close (opt.closeCall);
});
}
事件();
};
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
