Maison > Article > interface Web > Exemple de partage de composants de fenêtres contextuelles encapsulés dans js à l'aide de classes
Exemple de partage de composants de fenêtres contextuelles encapsulés dans js à l'aide de classes
- 小云云original
- 2018-05-28 13:45:542249parcourir
Le composant de la boîte contextuelle ci-dessous est encapsulé à l'aide de classes. Un composant contextuel est généré à l'aide d'une nouvelle instance. Cet article présente principalement en détail la méthode d'encapsulation des composants de fenêtres contextuelles avec des classes js. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Le code est directement en dessous :
Structure html :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*基本的样式*/
button{width: 1.6rem;height: 0.5rem;font-size: 0.3rem;line-height: 0.5rem;background: red;color: white;font-weight: bold}
.hide{display: none;}
.js-pop{
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
top:0;
left: 0;
font-size: 0.24rem;
}
.js-pop .mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
}
.js-pop .content{
position: fixed;
top: 50%;
left: 50%;
width: 5.80rem;
height: 4.81rem;
margin: -2.405rem 0 0 -2.9rem;
background: url("pop-bg.png") no-repeat;
background-size: contain;
color: #262626;
text-align: center;
}
.js-pop .content .close{
position: absolute;
top: .25rem;
right: .08rem;
width: .54rem;
height: .48rem;
z-index: 4;
cursor:pointer;
}
.js-pop .content .prize-title {
height: .39rem;
min-width: 1.77rem;
margin: .28rem auto;
line-height: 0.39rem;
color: white;
text-align: left;
text-indent: 1rem;
}
.js-pop .content .prize-content {
color: #a40000;
font-size: .24rem;
margin:0 0.1rem 0 0.49rem;
line-height: 0.4rem;
width: 5.2rem;
}
</style>
</head>
<body>
<button id="bb">显示弹窗</button>
<p class="js-pop js-prize-pop hide" id="popLogin">
<p class="mask"></p>
<p class="content">
<p class="close"></p>
<p class="prize-title">温馨提示</p>
<p class="prize-content" style="margin-top: 1rem">
登录后才能参与活动哦！
<br/>
自动登录跳转中......
</p>
</p>
</p>
<!--引入jquery-->
<script type="text/javascript" src="http://image.37wan.cn/common/js/jquery-1.9.1.min.js"></script>
<!--引入Pop组件-->
<script src="pop.js"></script>
<script>
// rem代码
var windowW = $(window).width();
var ratio = windowW/640;
$("html").css("fontSize",100*ratio+"px");
$(window).on("resize",function(){
var windowW = $(window).width();
var ratio = windowW/640;
$("html").css("fontSize",100*ratio+"px");
});
//new一个Pop实例
var popLogin=new Pop($("#popLogin"));
$("#bb").on("click",function(){
popLogin.open();
});
</script>
</body>
</html>Code pop.js :
//Pop的构造函数
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();
};Recommandations associées :
Comment ajouter des données à la boîte pop-up Popup
10 articles recommandés sur pop()
À propos de vue. js popup Résumé des points de connaissances sur les composants de fenêtre
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!