快捷導(dǎo)航

javascript實(shí)現(xiàn)蒙版與禁止頁(yè)面滾動(dòng)

更新時(shí)間：2020年01月11日 10:10:57 作者：Original-Heart

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)蒙版與禁止頁(yè)面滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)蒙版與禁止頁(yè)面滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

項(xiàng)目需求：頁(yè)面很長(zhǎng)，要求加個(gè)蒙版，點(diǎn)擊特定位置蒙版消失可以滑動(dòng)頁(yè)面，否則蒙版存在頁(yè)面不可以滑動(dòng)；要同時(shí)兼容移動(dòng)端和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動(dòng)</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(){
  // 阻止蒙版后頁(yè)面滑動(dòng)
  if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  //移動(dòng)端
    $(".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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)的通用表單驗(yàn)證插件完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的通用表單驗(yàn)證插件,可針對(duì)常見(jiàn)的日期、密碼、姓名等進(jìn)行驗(yàn)證并給出提示信息,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
云開(kāi)發(fā)進(jìn)階uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換詳解
這篇文章主要為大家介紹了云開(kāi)發(fā)進(jìn)階uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
JavaScript實(shí)現(xiàn)組件化和模塊化方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)組件化和模塊化方法，模塊化主要是指一個(gè)JS文件就是一個(gè)模塊，向外提供特定功能的程序，組件化的中心思想其實(shí)跟模塊化是大同小異的，感興趣想要詳細(xì)了解可以參考下文
2023-05-05
JavaScript將Web頁(yè)面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁(yè)面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
詳解JavaScript實(shí)現(xiàn)哈希表
哈希表是一種非常重要的數(shù)據(jù)結(jié)構(gòu)，幾乎所有的編程語(yǔ)言都有直接或者間接的應(yīng)用這種數(shù)據(jù)結(jié)構(gòu)。本文將為大家介紹通過(guò)JavaScript如何實(shí)現(xiàn)哈希表，以及哈希表的一些常用操作，需要的可以參考一下
2021-12-12
javascript得到當(dāng)前頁(yè)的來(lái)路即前一頁(yè)地址的方法
這篇文章主要介紹了javascript得到當(dāng)前頁(yè)的來(lái)路即前一頁(yè)地址的方法,需要的朋友可以參考下
2014-02-02
js數(shù)組循環(huán)遍歷數(shù)組內(nèi)所有元素的方法
在js中數(shù)組遍歷最簡(jiǎn)單的辦法就是使用for然后再利用arr.length長(zhǎng)度作為for最大限度值即可解決了，下面我們來(lái)看看一些有用的實(shí)例
2014-01-01
WebSocket中心跳檢測(cè)與斷開(kāi)重連機(jī)制詳解
心跳檢測(cè)是指在WebSocket連接過(guò)程中定時(shí)向服務(wù)端發(fā)送和接收心跳消息,來(lái)確定當(dāng)前連接是否是正常狀態(tài)的檢測(cè)機(jī)制,斷開(kāi)重連是指在WebSocket不正常斷開(kāi)連接后,進(jìn)行重新連接的策略,下面我們就來(lái)看看這二者的具體實(shí)現(xiàn)吧
2024-01-01
JS組件福利大放送推薦12款好用的Bootstrap組件
Bootstrap組件福利大放送，這篇文章主要為大家推薦了幾款好用的Bootstrap組件，感興趣的小伙伴們可以參考一下
2016-07-07
如何實(shí)現(xiàn)小程序與小程序之間的跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)小程序與小程序之間的跳轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11