1.html部分
<!--分享弹框-->
<div class="chat-box chat-box-share">
<div class="chat-tip">
<img src="img/sharetoast.gif" alt="" id='share'/>
<span class="close-btn"></span>
</div>
</div>
<!--分享-->
2.css部分
chat-box{
width: 100%;
position: fixed;
top: 0rem;
z-index: 2;
display: none;
background: rgba(0,0,0,0.5);
}
.chat-tip{
position: absolute;
left: 10%;
top: 22%;
/*top: 50%;*/
width: 80%;
height: 3.2rem;
padding: 0.3rem;
margin-top: -1.6rem;
/*background: #FFFFFF;*/
text-align: center;
border-radius: 0.2rem;
}
#share{
width: 100%;}
.chat-tip p{
font-size: 0.4rem;
font-weight: bold;
margin-bottom: 0.3rem;
}
.chat-tip button{
width: 3rem;
height: 1rem;
background: #4DCC01;
text-align: center;
line-height: 1rem;
border: none;
font-size: 0.35rem;
border-radius: 0.2rem;
outline: none;
}
.chat-tip button a{
color: #FFFFFF;
}
.chat-tip .close-btn{
position: absolute;
top: -0.1rem;
right: -0.1rem;
width: 0.6rem;
height: 0.6rem;
background: url(../img/hudong-detail/close_btn.png) center center no-repeat;
background-size: 100%;
}
3.js
var toggle= false;
window.onscroll=function(){
var max = document.body.offsetHeight;
console.log(listH);
if(scrollY>max-listH-innerHeight && !toggle){
toggle=true;
$('.chat-box-share').height($(window).height());
$('.chat-box-share').show();
console.log("打开窗口")
}
// if(scrollY<max-listH-innerHeight && toggle){
// toggle=false;
// }
}
注:js中注释掉的是代表弹窗在页面中只出现一次,不注释则代表鼠标上下滑动时在距离底部100px时出现弹框,向上滑动时则没有出现弹框
网友评论