弹窗联系表单背景模糊/半透明效果实现求助

直接修改body的opacity会导致所有子元素（包括弹窗）继承透明属性，这是核心问题。正确做法是添加独立的全屏遮罩层，专门实现背景灰化/模糊效果，弹窗置于遮罩层上方即可避免受影响。

步骤1：修改HTML结构，新增遮罩层 #

在弹窗元素前后添加遮罩层节点：

<div id="contact">Contact</div>
<!-- 新增全屏遮罩层 -->
<div id="overlay"></div>
<div id="contactForm">
  <h1>Keep in touch!</h1>
  <small>I'll get back to you as quickly as possible</small>
  <form action="#">
    <input placeholder="Name" type="text" required />
    <input placeholder="Email" type="email" required />
    <input placeholder="Subject" type="text" required />
    <textarea placeholder="Comment"></textarea>
    <input class="formBtn" type="submit" />
    <input class="formBtn" type="reset" />
  </form>
</div>

步骤2：添加CSS样式 #

设置遮罩层全屏样式，同时确保弹窗层级高于遮罩层：

/* 遮罩层默认隐藏，全屏覆盖页面 */
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 灰化效果：半透明黑色，可调整第四个值控制透明度 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 如需模糊效果，替换上面的background为以下代码 */
  /* backdrop-filter: blur(5px); */
  z-index: 999; /* 层级低于弹窗 */
}

/* 弹窗固定居中，层级高于遮罩层 */
#contactForm {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 2rem;
  z-index: 1000; /* 层级高于遮罩层 */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* 给Contact按钮添加基础样式 */
#contact {
  cursor: pointer;
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: #fff;
  display: inline-block;
  border-radius: 4px;
}

步骤3：修改jQuery代码，同步控制遮罩层与弹窗 #

在弹窗显示/隐藏时同步处理遮罩层状态，同时支持点击遮罩层关闭弹窗：

$(function() {
    // 点击Contact按钮，同步显示/隐藏弹窗和遮罩层
    $('#contact').click(function() {
      $('#contactForm').fadeToggle();
      $('#overlay').fadeToggle();
    })
    
    // 点击空白区域或遮罩层，关闭弹窗和遮罩层
    $(document).mouseup(function (e) {
      var container = $("#contactForm");
      if (!container.is(e.target) && container.has(e.target).length === 0)
      {
          container.fadeOut();
          $('#overlay').fadeOut();
      }
    });
  });

效果说明 #

• 点击Contact按钮时，弹窗与遮罩层同步显示，背景页面被灰化/模糊，弹窗保持清晰
• 点击弹窗以外的区域（含遮罩层），弹窗与遮罩层同步隐藏
• 可通过调整#overlay的rgba透明度或backdrop-filter的模糊值，自定义背景效果

内容的提问来源于stack exchange，提问作者Patrycja