jquery下实现overlay遮罩层代码

下面是jquery下实现overlay遮罩层代码的完整攻略。

背景知识

overlay遮罩层是一种常用的web页面效果，它可以用来阻止用户在操作页面时与页面下层元素发生交互，通常用于loading、模态框等场景。

实现思路

使用jquery实现overlay遮罩层的基本思路是:

1. 创建一个全屏遮罩层元素。
2. 设置该元素的样式。
3. 将该元素添加到body标签中。
4. 在需要遮罩的元素上调用show方法显示遮罩层，并在需要隐藏遮罩层时调用hide方法隐藏遮罩层。

实现代码

下面是一个简单的实现overlay遮罩层的jquery代码：

//创建并显示遮罩层
var $overlay = $('<div class="overlay"></div>');
$('body').append($overlay);
$overlay.show();

//隐藏遮罩层
$overlay.hide();

通过以上代码，我们可以看出，要实现遮罩层，我们需要做以下几步操作：

1. 创建一个div元素，并添加类名为overlay。
2. 将该div元素添加到body标签中。
3. 调用show()方法显示遮罩层。
4. 调用hide()方法隐藏遮罩层。

下面展示两个实际应用过程中，用jquery实现overlay遮罩层的示例说明：

示例一：页面loading遮罩层

这是一个简单的示例，用于实现页面loading时的遮罩层。

<!-- HTML -->
<div id="loading">
  <div class="overlay"></div>
  <div class="loading-icon"></div>
</div>

/* CSS */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#loading .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}
#loading .loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*使用gif等图片或icon字体，这里省略*/
}

// JS
function showLoading() {
  $('#loading').show();
}

function hideLoading() {
  $('#loading').hide();
}

// 显示loading层
showLoading();
// 隐藏loading层
hideLoading();

通过上面的示例，我们可以发现，在实现loading遮罩层时，主要是增加了一个loading-icon层，并用showLoading和hideLoading方法分别控制了loading的显示和隐藏。

示例二：模态框遮罩层

这是一个稍微复杂一点的示例，用于实现模态框遮罩层。

<!-- HTML -->
<div id="overlay"></div>

<div id="modal" class="modal">
  <h2>模态框标题</h2>
  <p>模态框内容</p>
  <button id="modal-btn-close" type="button">关闭</button>
</div>

/* CSS */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal {
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: none;
}

.modal h2 {
  margin-top: 0;
}

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

// JS
// 显示遮罩层和模态框
function showModal() {
  $('#overlay').show();
  $('#modal').show();
}

// 隐藏遮罩层和模态框
function hideModal() {
  $('#overlay').hide();
  $('#modal').hide();
}

// 点击‘关闭’按钮时，隐藏遮罩层和模态框
$('#modal-btn-close').on('click', function() {
  hideModal();
});

通过上面的示例，我们可以发现，在实现模态框遮罩层时，主要是增加了一个模态框层，并将其叠加在遮罩层上面，在jquery中，控制模态框的显示和隐藏，需使用showModal和hideModal方法。