這篇文章主要介紹使用javascript實現蒙版與禁止頁面滾動效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

創新互聯專注于喀喇沁企業網站建設,響應式網站設計,商城開發。喀喇沁網站建設公司,為喀喇沁等地區提供建站服務。全流程按需求定制網站,專業設計,全程項目跟蹤,創新互聯專業和態度為您提供的服務
項目需求:頁面很長,要求加個蒙版,點擊特定位置蒙版消失可以滑動頁面,否則蒙版存在頁面不可以滑動;要同時兼容移動端和pc端。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
<title>蒙版與禁止滾動</title>
<style>
.container{
width:200px;
height:2000px;
background-color:blue;
}
.modal{
width: 100%;
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background-color: rgba(0,0,0,0.7);
background-size: 100%;
}
.p{
font-size: 50px;
color:red;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<p>內容</p>
</div>
<!-- 蒙版 -->
<div class="modal">
<p class="p">按鈕</p>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
// 阻止蒙版后頁面滑動
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
//移動端
$(".modal").on('touchmove',function(e){
e.stopPropagation();
e.preventDefault();
$('.p').click(function(){
$(this).parent().hide();
})
})
} else {
//PC端
var flag=true;
$('.p').click(function(){
$(this).parent().hide();
$('body').css({ "overflow":'visible'});
flag=false;
})
if(flag)
$('body').css({ "overflow":'hidden' });
}
})
</script>
</html>以上是“使用javascript實現蒙版與禁止頁面滾動效果”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯行業資訊頻道!
當前文章:使用javascript實現蒙版與禁止頁面滾動效果
地址分享:http://www.yijiale78.com/article48/pcsjhp.html
成都網站建設公司_創新互聯,為您提供網站制作、商城網站、營銷型網站建設、微信公眾號、手機網站建設、域名注冊
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯