兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码

接下来是详细讲解“兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码”的完整攻略。

首先，需要说明一下遮罩层的概念。遮罩层是一种常见的页面蒙版（或称为遮挡层），一般情况下用于模拟弹窗、广告等强制性消息窗口。我们需要在页面上添加一个遮罩层，通过覆盖整个网页并给予透明度，使得用户无法操作网页内的元素，同时突出弹出的窗口。

接下来，我们来分步骤讲解 jQuery+CSS 实现遮罩层的简单代码。

第一步：编写 HTML 结构

首先，我们需要在 HTML 页面中添加一个遮罩层的结构，来保存样式和内容。一般情况下，我们的遮罩层结构会嵌套在一个主容器中，这样方便管理和控制，同时也可以承载更多的元素。以下是一个典型的遮罩层的 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery+CSS 实现遮罩层的简单代码</title>
  <style>
    /* 遮罩层样式 */
    .overlay {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #000;
      opacity: 0.5;
      filter:alpha(opacity=50);   /* 兼容 IE 浏览器 */
      z-index: 999;
      display: none;   /* 隐藏初始状态 */
    }

    /* 主容器样式 */
    .container {
      position: relative;
      z-index: 1000;
      background-color: #fff;
      width: 400px;
      height: 200px;
      margin: 0 auto;
      margin-top: 100px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="overlay"></div>   <!-- 添加遮罩层 -->

  <div class="container">
    <h2>这是一个弹出窗口</h2>
    <p>这是一个很长的内容，但不影响结构。</p>
    <button class="btnClose">关闭窗口</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 添加关闭按钮的事件处理程序
    $(document).ready(function() {
      $(".btnClose").click(function() {
        $(".overlay").hide();   // 隐藏遮罩层
        $(".container").hide();   // 隐藏弹出窗口
      });
    });
  </script>
</body> 
</html>

在上面的代码中，我们添加了两个基本元素：一个名为 overlay 的 div，这是遮罩层本身，用于覆盖整个页面；一个名为 container 的 div，这是一个弹出窗口的框架，内容和样式都在这个 div 中。

需要注意的是，我们需要在遮罩层和弹出框之间设置 z-index 属性，来确定它们之间的相对顺序。

第二步：设置遮罩层的初始状态

为了使遮罩层在页面加载时处于隐藏状态，我们可以设置其 display 属性为 none。其他的样式可以根据需要进行自定义，这里给出了一个常见的设置：

/* 遮罩层样式 */
.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
  filter:alpha(opacity=50);  /* 兼容 IE 浏览器 */
  z-index: 999;
  display: none;  /* 隐藏初始状态 */
}

这里给出了一个简单的遮罩层样式，设置了高度、宽度、位置、背景颜色、透明度等，这些可以根据需要进行修改。

第三步：添加事件处理程序

最后，我们需要添加一个事件处理程序，用于当用户点击弹出窗口时，显示遮罩层和弹出框。具体的代码可以如下所示：

// 添加事件处理程序
$(document).ready(function() {
  // 遮罩层显示
  $(".overlay").show();

  // 弹出框显示
  $(".container").show();

  // 添加关闭按钮的事件处理程序
  $(".btnClose").click(function() {
    $(".overlay").hide();   // 隐藏遮罩层
    $(".container").hide();   // 隐藏弹出窗口
  });
});

这里，我们使用了 jQuery 的 show() 和 hide() 方法来控制遮罩层和弹出框的显隐状态。同时，为了在用户点击关闭按钮时隐藏遮罩层和弹出框，我们添加了一个 click() 事件处理程序。

示例一：

通过上面的三个步骤，我们就可以实现一个简单的遮罩层效果。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery+CSS 实现遮罩层的简单代码</title>
  <style>
    /* 遮罩层样式 */
    .overlay {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #000;
      opacity: 0.5;
      filter:alpha(opacity=50);   /* 兼容 IE 浏览器 */
      z-index: 999;
      display: none;   /* 隐藏初始状态 */
    }

    /* 主容器样式 */
    .container {
      position: relative;
      z-index: 1000;
      background-color: #fff;
      width: 400px;
      height: 200px;
      margin: 0 auto;
      margin-top: 100px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="overlay"></div>   <!-- 添加遮罩层 -->

  <div class="container">
    <h2>这是一个弹出窗口</h2>
    <p>这是一个很长的内容，但不影响结构。</p>
    <button class="btnClose">关闭窗口</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 添加事件处理程序
    $(document).ready(function() {
      // 遮罩层显示
      $(".overlay").show();

      // 弹出框显示
      $(".container").show();

      // 添加关闭按钮的事件处理程序
      $(".btnClose").click(function() {
        $(".overlay").hide();   // 隐藏遮罩层
        $(".container").hide();   // 隐藏弹出窗口
      });
    });
  </script>
</body> 
</html>

示例二：

我们还可以在页面上添加多个弹窗，这需要在 HTML 结构中添加多个 .container div。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery+CSS 实现遮罩层的简单代码</title>
  <style>
    /* 遮罩层样式 */
    .overlay {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #000;
      opacity: 0.5;
      filter:alpha(opacity=50);   /* 兼容 IE 浏览器 */
      z-index: 999;
      display: none;   /* 隐藏初始状态 */
    }

    /* 主容器样式 */
    .container {
      position: relative;
      z-index: 1000;
      background-color: #fff;
      width: 400px;
      height: 200px;
      margin: 0 auto;
      margin-top: 100px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="overlay"></div>   <!-- 添加遮罩层 -->

  <!-- 弹窗一 -->
  <div class="container">
    <h2>弹出窗口一</h2>
    <p>这是第一个弹出窗口。</p>
    <button class="btnClose">关闭窗口</button>
  </div>

  <!-- 弹窗二 -->
  <div class="container">
    <h2>弹出窗口二</h2>
    <p>这是一个很长的内容，但不影响结构。</p>
    <button class="btnClose">关闭窗口</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 添加事件处理程序
    $(document).ready(function() {
      // 遮罩层显示
      $(".overlay").show();

      // 弹出框显示
      $(".container").show();

      // 添加关闭按钮的事件处理程序
      $(".btnClose").click(function() {
        $(".overlay").hide();   // 隐藏遮罩层
        $(this).parent().hide();   // 隐藏当前弹出窗口
      });
    });
  </script>
</body> 
</html>

在上面的代码中，我们在 HTML 结构中添加了两个 .container div，分别代表两个弹窗。

需要注意的是，我们在关闭按钮的事件处理程序中使用了 $(this).parent().hide() 来隐藏当前的弹出框 div。因为关闭按钮是在弹出框内部的，所以 $(this) 代表的是关闭按钮本身，使用 $(this).parent() 可以获取到包含关闭按钮的 div，也就是弹出框本身。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码 - Python技术站

兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码

第一步：编写 HTML 结构

第二步：设置遮罩层的初始状态

第三步：添加事件处理程序

相关文章