JS操作頁面背景變暗

這次帶給大家JS操作頁面背景變暗，JS操作頁面背景變暗的注意事項有哪些，以下就是實戰案例，一起來看一下。

1.先寫一個遮罩層p，然後再寫一個彈窗的p

<!-- 遮罩层 -->
<p>
  
</p>
<!-- 弹窗 -->
<p>
  <!-- 标题 -->
  </p><p>
    提示
  </p>
  <!-- 内容 -->
  <p>
    js弹窗 js弹出p,并使整个页面背景变暗</p>
  <!-- 按钮 -->
  <p>
    确 定
  </p>

js程式碼：（把jq引進來）

<script>
  // 弹窗
  function showWindow() {
    $(&#39;#showp&#39;).show();  //显示弹窗
    $(&#39;#cover&#39;).css(&#39;display&#39;,&#39;block&#39;); //显示遮罩层
    $(&#39;#cover&#39;).css(&#39;height&#39;,document.body.clientHeight+&#39;px&#39;); //设置遮罩层的高度为当前页面高度
  }
  // 关闭弹窗
  function closeWindow() {
    $(&#39;#showp&#39;).hide();  //隐藏弹窗
    $(&#39;#cover&#39;).css(&#39;display&#39;,&#39;none&#39;);   //显示遮罩层
  }
</script>

效果：

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue觸發行動裝置捲軸事件

#怎麼做出下滑頁底無限載入資料需求

#

以上是JS操作頁面背景變暗的詳細內容。更多資訊請關注PHP中文網其他相關文章！