在web开发中,有时候我们需要实现在页面上点击某个按钮弹出窗口,并禁用页面滑动或滚动的需求。以下是我本人的做法,望大家多多提出意见或建议。
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端弹框禁止背景滑动</title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="../lib/swiper/dist/css/swiper.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no;">
<script src="../lib/swiper/dist/js/swiper.min.js"></script>
<script src="../lib/jquery.min.js"></script>
<style>
* {
font-size: 0.35rem;
line-height: 0.6rem;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
min-width: 320px;
max-width: 750px;
margin: 0 auto;
background-color: #eee;
width: 100%;
}
.layout {
background-color: #fff;
padding: 0.2rem;
}
.shade {
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.6);
position: fixed;
top: 0;
left: 0;
z-index:300;
display: none
}
.tankuang {
width: 80%;
height: 4rem;
background-color: #fff;
position: fixed;
left: 10%;
top: 50%;
margin-top: -2rem;
border-radius: 5px;
z-index: 400;
display: none;
}
.tankuang .content {
height: 3.2rem;
overflow: auto;
margin: 0.6rem 0.2rem 0.2rem 0.2rem;
}
.tankuang .close-btn {
width: 0.5rem;
height: 0.5rem;
text-align: center;
line-height: 0.5rem;
font-size: 0.5rem;
position: absolute;
right: 0;
top: 0;
}
.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 0.8rem;
z-index: 200;
text-align: center;
color: #fff;
font: normal 0.3rem/0.8rem 'Microsoft YaHei';
}
.top div {
position: relative;
min-width: 320px;
max-width: 750px;
margin: 0 auto;
height: 0.8rem;
line-height: 0.8rem;
background-color: rgba(0,0,0,0.7);
border-bottom: 1px solid #ccc;
}
.banner {
min-width: 320px;
max-width: 750px;
height: 3rem;
}
.banner a {
display: block;
width: 100%;
height: 100%;
}
.banner a img {
width: 100%;
height: 100%;
}
@media (max-width: 750px) {
.swiper-button-prev, .swiper-button-next {
display: none;
}
}
</style>
</head>
<body style="padding-top: 0.8rem;position: relative;">
<div class="top">
<div>顶部固定定位部分</div>
</div>
<div class="banner" id="banner" style="overflow: hidden;">
<div class="swiper-container" style="height: 100%;overflow: hidden;">
<div class="swiper-wrapper">
<div class="swiper-slide b-item">
<a href="http://test.m.course.mtedu.com/pages/course-v2.html?course_id=3115">
<img src="http://cdn.img.mtedu.com/upload/images/course/86/7f/bf/867fbf2b26cf0a1ba4505d6ea9e82193.jpg" alt="">
</a>
</div>
<div class="swiper-slide b-item">
<a href="http://test.m.course.mtedu.com/pages/course-v2.html?course_id=216">
<img src="http://cdn.img.mtedu.com/sale/images/20170614151112_725215.jpg" alt="">
</a>
</div>
<div class="swiper-slide b-item">
<a href="http://test.m.course.mtedu.com/pages/course-v2.html?course_id=215">
<img src="http://cdn.img.mtedu.com/sale/images/20170608193416_543505.jpg" alt="">
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev" style="width: 0.25rem;height: 0.4rem;background-size: contain;margin-top: -0.2rem;"></div>
<div class="swiper-button-next" style="width: 0.25rem;height: 0.4rem;background-size: contain;margin-top: -0.2rem;"></div>
<!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div>
</div>
<div class="layout">
<div>
<p>转岗问题分析在不少互联网公司,产品运营做的事情,就是搞搞活动,做做内容编辑,管理一下社区,</p>
<p>做一些用户沟通交流,联络应用商店德国渠道进行产品发布,更加深入一点,就收集数据进行分析,也就是通常说的:活动运营、内容运营、社区运营、用户运营等工作。
于是,有人问,如何从产品运营转产品经理?</p>
<p>BLUES回答过不少这样的提问。这里先不解答,直接看看下面的两张图,来自于腾讯的产品职级体系,3级职业等,就是俗话说的3-1</p>
<p>答案其实很明显,上图是产品策划的能力体系,下图是产品运营的能力体系。
在腾讯公司,产品策划和产品运营,都是产品经理体系,只是各有偏重。到了3-1,3级职业等,都称为高级产品经理。
最大的差别在于:产品策划需要具备专业设计能力。
在职业通道里面,专业设计能力的描述是:依据用户使用场景,使用相关专业领域的知识、工具和技巧,设计出满足甚至超出用户预期的功能特性。
专业设计能力的评价标准:
对于某专业策划设计领域有较深厚的经验积累,能在自己专业设计角度上极大的促进产品整体品质的提升,能指导别</p>
<p>中独立主导完成的中型策划设计项目的规划和成果报告;
提交自己撰写的相关专业领域的培训课件或者经验分享材料
产品运营比产品策划要求更高的能力是:
运营数据分析
市场营销
对外商务沟通</p>
<input type="button" id="btn" value="弹框1"/>
<input type="button" id="btn2" value="弹框2"/>
<h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>ert1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1ry</h1>
<h1>1</h1><h1>1</h1><h1>1bfd</h1><h1>1</h1><h1>1ryer</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1>
<h1>1</h1><h1>1</h1><h1>1234</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1hdfh</h1><h1>1</h1><h1>1dg</h1><h1>1</h1>
</div>
</div>
<!--遮罩层-->
<div class="shade" id="shade"></div>
<!--弹框1-->
<div class="tankuang" id="tankuang">
<div class="content">
<p>转岗问题分析在不少互联网公司,产品运营做的事情,就是搞搞活动,做做内容编辑,管理一下社区,</p>
<p>做一些用户沟通交流,联络应用商店德国渠道进行产品发布,更加深入一点,就收集数据进行分析,也就是通常说的:活动运营、内容运营、社区运营、用户运营等工作。
于是,有人问,如何从产品运营转产品经理?</p>
<p>BLUES回答过不少这样的提问。这里先不解答,直接看看下面的两张图,来自于腾讯的产品职级体系,3级职业等,就是俗话说的3-1</p>
<p>答案其实很明显,上图是产品策划的能力体系,下图是产品运营的能力体系。
在腾讯公司,产品策划和产品运营,都是产品经理体系,只是各有偏重。到了3-1,3级职业等,都称为高级产品经理。
最大的差别在于:产品策划需要具备专业设计能力。
在职业通道里面,专业设计能力的描述是:依据用户使用场景,使用相关专业领域的知识、工具和技巧,设计出满足甚至超出用户预期的功能特性。
专业设计能力的评价标准:
对于某专业策划设计领域有较深厚的经验积累,能在自己专业设计角度上极大的促进产品整体品质的提升,能指导别</p>
<p>中独立主导完成的中型策划设计项目的规划和成果报告;
提交自己撰写的相关专业领域的培训课件或者经验分享材料
产品运营比产品策划要求更高的能力是:
运营数据分析
市场营销
对外商务沟通</p>
</div>
<div class="close-btn" id="close">×</div>
</div>
<!--弹框2-->
<div class="tankuang tankuang2" id="tankuang2" style="height: 2rem;text-align: center;margin-top: -1rem;">
<div style="height: 1.2rem;line-height: 1.2rem;">
确定要如此操作吗?
</div>
<div style="height: 0.8rem;">
<div id="cancel" style="float: left;width: 50%;height: 100%;line-height: 0.8rem;font-size: 0.3rem;border-top: 1px solid #ccc;">
取消
</div>
<div id="sure" style="float: left;width: 50%;height: 100%;line-height: 0.8rem;font-size: 0.3rem;background-color: red;color: #fff;border-bottom-right-radius: 4px;">
确定
</div>
</div>
</div>
<script>
new function (){
var _self = this ;
_self.width = 750; // 设置默认最大宽度
_self.fontSize = 100; // 默认字体大小
_self.widthProportion = function (){
var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<(32/75)?(32/75):p;
};
_self.changePage = function (){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize', function (){_self.changePage();}, false );
};
var scroolTop = 0;
/*弹出弹框*/
$('#btn').click(function () {
scroolTop = $(document).scrollTop();
console.log(scroolTop);
$('body').css({
'position':'fixed',
'top':'-'+scroolTop+'px',
});
$('#shade').css('display','block');
$('#tankuang').css('display','block');
});
/*关闭弹框*/
$('#close').click(function () {
$('body').css({
'position':'relative',
'top':'0'
});
$(document).scrollTop(scroolTop)
$('#shade').css('display','none');
$('#tankuang').css('display','none');
});
/*点击区域*/
$('#shade').click(function () {
$('#close').click();
})
/*弹出弹框*/
$('#btn2').click(function () {
scroolTop = $(document).scrollTop();
$('body').css({
'position':'fixed',
'top':'-'+scroolTop+'px'
});
$('#shade').css('display','block');
$('#tankuang2').css('display','block');
});
/*关闭弹框*/
$('#cancel, #sure').click(function () {
$('body').css({
'position':'relative',
'top':'0'
});
$(document).scrollTop(scroolTop)
$('#shade').css('display','none');
$('#tankuang2').css('display','none');
});
/*点击区域*/
$('#shade').click(function () {
$('#cancel').click();
})
/*点击确定*/
$('#sure').click(function () {
console.log('已经确定');
});
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
effect:'slide', //切换效果,默认为"slide"(位移切换),fade(淡入) cube(方块) coverflow(3d流) flip(3d翻转)
autoplay: 3000,//可选选项,自动滑动
pagination: '.swiper-pagination',// 如果需要分页器
paginationClickable:true, //true:可点击切换,false:不可点击
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// scrollbar: '.swiper-scrollbar', // 如果需要滚动条
})
//鼠标经过,停止轮播
document.getElementsByClassName('swiper-container')[0].onmouseover = function () {
mySwiper.stopAutoplay();
}
//鼠标离开,继续轮播
document.getElementsByClassName('swiper-container')[0].onmouseout = function () {
mySwiper.startAutoplay();
}
//手指从屏幕上离开,继续轮播
document.getElementsByClassName('swiper-container')[0].addEventListener('touchend',function () {
mySwiper.startAutoplay();
});
//修改分页器的click事件为mouseover事件
// $('.swiper-container .swiper-pagination').on('mouseover', 'span', function (){
// var index = $(this).index();
// console.log(index+1);
// mySwiper.slideTo(index+1);
// });
</script>
</body>
</html>
效果图: