jquery弹出关闭遮罩层实例

下面是jquery弹出关闭遮罩层实例的完整攻略。

1. 确定需求

在开始开发之前，我们需要确定这个功能的需求，明确要做什么。

在本次案例中，我们需要实现一个弹出层，当用户点击按钮时，弹出一个层覆盖在页面上，并显示相关内容。同时，我们还需要一个关闭按钮，当用户点击关闭按钮时，弹出层消失。

2. 准备html代码

在确定好需求后，我们需要写出html代码，为弹出层和相关的按钮设置基本的样式和属性。

<div id="mask"></div>

<div class="modal">
  <h2>弹出窗口</h2>
  <p>你好，我是一段弹出层上的文字。</p>
  <button id="close-btn">关闭</button>
</div>

<button id="show-btn">点击弹出层</button>

在这段代码中，我们定义了三个容器：#mask，.modal和#show-btn。

其中，#mask是遮罩层的容器，.modal是弹出层的容器，#show-btn是触发弹出层的按钮。

注意，我们的弹出层默认是隐藏的，并且遮罩层是铺满整个页面的。

3. 编写CSS样式

CSS样式的编写是整个页面的重中之重，好的CSS样式可以让页面更加美观、布局更加合理。

以下是本案例中所用到的CSS代码：

#mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  display: none;
}

.modal h2 {
  margin-top: 0;
}

.modal p {
  margin-bottom: 20px;
}

#close-btn {
  display: block;
  margin: 0 auto;
}

在这段代码中，我们定义了#mask和.modal两个容器的样式：

• mask的样式效果是，遮罩层覆盖整个页面，半透明黑色背景，z-index设置为1000，初始状态下是隐藏的（display:none）。

• .modal的样式效果是，弹出层位于页面的居中位置，背景色为白色，带有一点透明度，设置了padding和边框半径，z-index设置为1001，初始状态下是隐藏的（display:none）。

在样式编写完成后，页面的基本外观已经完成了。

4. 编写JavaScript代码

这个时候，我们需要编写JavaScript代码，实现随着按钮的点击，弹出、关闭遮罩层的逻辑。

在这段代码中，我们可以使用jQuery的$(...)方法选择对应的元素，使用click事件来监听按钮的点击，使用fadeIn和fadeOut方法来显示隐藏弹出层和遮罩层。

以下是本案例中所用到的JavaScript代码：

$(document).ready(function() {
  // 点击弹出按钮
  $('#show-btn').click(function() {
    // 显示遮罩层和弹出层
    $('#mask').fadeIn();
    $('.modal').fadeIn();
  });

  // 点击关闭按钮
  $('#close-btn').click(function() {
    // 隐藏遮罩层和弹出层
    $('#mask').fadeOut();
    $('.modal').fadeOut();
  });
});

在这段代码中，我们分别通过$(...)方法获取了#show-btn和#close-btn元素，并分别添加了click事件监听函数。

在#show-btn被点击时，我们调用了fadeIn方法，将#mask和.modal元素以渐显效果显示出来。

而在#close-btn被点击时，我们调用了fadeOut方法，将#mask和.modal元素以渐隐效果隐藏掉。

到此，我们的实例过程已经全部讲解完毕。需要注意的是，这只是一个简单的实例，如果需要更加复杂的页面交互逻辑，相应的代码会比这个实例更加复杂。