javascript實現(xiàn)蒙版與禁止頁面滾動
更新時間：2020年01月11日 10:10:57 作者：Original-Heart
這篇文章主要為大家詳細介紹了javascript實現(xiàn)蒙版與禁止頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)蒙版與禁止頁面滾動的具體代碼，供大家參考，具體內(nèi)容如下
項目需求：頁面很長，要求加個蒙版，點擊特定位置蒙版消失可以滑動頁面，否則蒙版存在頁面不可以滑動；要同時兼容移動端和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>蒙版與禁止?jié)L動</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>內(nèi)容</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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS實現(xiàn)的通用表單驗證插件,可針對常見的日期、密碼、姓名等進行驗證并給出提示信息,非常具有實用價值,需要的朋友可以參考下2015-08-08
云開發(fā)進階uniCloud-db組件與JQL語法的轉換詳解
這篇文章主要為大家介紹了云開發(fā)進階uniCloud-db組件與JQL語法的轉換詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了JavaScript實現(xiàn)組件化和模塊化方法，模塊化主要是指一個JS文件就是一個模塊，向外提供特定功能的程序，組件化的中心思想其實跟模塊化是大同小異的，感興趣想要詳細了解可以參考下文2023-05-05
JavaScript將Web頁面內(nèi)容導出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁面內(nèi)容導出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
哈希表是一種非常重要的數(shù)據(jù)結構，幾乎所有的編程語言都有直接或者間接的應用這種數(shù)據(jù)結構。本文將為大家介紹通過JavaScript如何實現(xiàn)哈希表，以及哈希表的一些常用操作，需要的可以參考一下2021-12-12
這篇文章主要介紹了javascript得到當前頁的來路即前一頁地址的方法,需要的朋友可以參考下2014-02-02
js數(shù)組循環(huán)遍歷數(shù)組內(nèi)所有元素的方法
在js中數(shù)組遍歷最簡單的辦法就是使用for然后再利用arr.length長度作為for最大限度值即可解決了，下面我們來看看一些有用的實例2014-01-01
心跳檢測是指在WebSocket連接過程中定時向服務端發(fā)送和接收心跳消息,來確定當前連接是否是正常狀態(tài)的檢測機制,斷開重連是指在WebSocket不正常斷開連接后,進行重新連接的策略,下面我們就來看看這二者的具體實現(xiàn)吧2024-01-01
Bootstrap組件福利大放送，這篇文章主要為大家推薦了幾款好用的Bootstrap組件，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要給大家介紹了關于如何實現(xiàn)小程序與小程序之間的跳轉的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11