jquery+CSS实现悬浮登录框遮罩

实现一个基于 jQuery 和 CSS 的悬浮登录框遮罩，一般需要以下步骤：

1. 在 HTML 中添加登录框和遮罩层的 DOM 结构；
2. 通过 CSS 设计登录框的样式，并隐藏登录框；
3. 为遮罩层和登录框添加事件处理函数；
4. 使用 jQuery 控制事件和动画效果，从而实现用户交互。

下面将对这些步骤进行详细讲解。

1. 添加 DOM 结构

先要在 HTML 中添加遮罩和登录框的 DOM 结构，可以参考以下示例代码：

  <div class="login-box">
    <h2>用户登录</h2>
    <form>
      <div class="form-group">
        <label>用户名:</label>
        <input name="username" type="text" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label>密码:</label>
        <input name="password" type="password" placeholder="请输入密码">
      </div>
      <div class="form-group">
        <button type="submit" class="btn">登录</button>
      </div>
    </form>
  </div>
  <div class="mask"></div>

其中，.login-box 和 .mask 分别是登录框和遮罩层的类名，可以在后续的 CSS 文件中使用。

2. 设计样式

显然，需要通过 CSS 来设计登录框和遮罩层的样式。以下是一份简单的示例：

  /* 模态框遮罩 */
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
  }

  /* 登录框 */
  .login-box {
    position: fixed;
    width: 400px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    display: none;
  }

这份样式中，.mask 使用了 position:fixed 实现绝对定位，background 属性设置了背景颜色以及透明度。同时，使用了 z-index 实现层叠关系，display:none 实现隐藏效果。

登录框样式同理，使用了 position:fixed 实现绝对定位，width 和 height 属性设置了宽高。box-shadow 属性设置了阴影效果，transform 属性实现了水平和竖直方向上的位移以及定位。

3. 添加事件处理函数

因为登录框和遮罩层需要添加事件处理函数，所以需要使用 jQuery 来注册事件监听函数，同时定义事件的响应所需的动作。以下是一个简单的示例：

  // 显示遮罩层和登录框
  function showLoginForm() {
    $('.mask').fadeIn();
    $('.login-box').fadeIn();
  }

  // 隐藏遮罩层和登录框
  function hideLoginForm() {
    $('.login-box').fadeOut();
    $('.mask').fadeOut();
  }

  // 绑定“登录”按钮事件
  $('.btn').click(showLoginForm);

  // 绑定关闭按钮事件
  $('.close-btn').click(hideLoginForm);

  // 点击遮罩层时，自动关闭登录框
  $('.mask').click(hideLoginForm);

在这个示例中，我们定义了 showLoginForm() 和 hideLoginForm() 函数分别来显示和隐藏登录框和遮罩层，然后使用 jQuery 的 fadeIn() 和 fadeOut() 函数来控制动画效果。

同时，使用了 jQuery 的事件绑定函数，给登录框中的“登录”按钮和关闭按钮以及遮罩层元素绑定事件，点击事件时分别调用上面定义的函数即可。

4. 使用 jQuery 控制事件和动画效果

在步骤 3 中已经提到，jQuery 可以用来控制事件和动画效果。以下是一个示例：

  // 鼠标进入登录框时，修改样式
  $('.login-box').mouseenter(function() {
    $(this).css({'box-shadow': '0 4px 8px rgba(0, 0, 0, 0.3)'});
  });

  // 鼠标移出登录框时，修改样式
  $('.login-box').mouseleave(function() {
    $(this).css({'box-shadow': '0 0 50px rgba(0, 0, 0, 0.3)'});
  });

在这个示例中，我们定义了一个鼠标进入和移出登录框的事件处理函数，使用 jQuery 的 mouseenter() 以及 mouseleave() 函数注册事件监听器。

在进入登录框时，使用 css() 函数修改了 box-shadow 属性的值，使得鼠标悬浮在登录框上时，出现一层浅色阴影。类似地，当鼠标移开登录框时，box-shadow 属性的值被重置，实现阴影效果的切换。

以上就是使用 jQuery 和 CSS 实现悬浮登录框遮罩的攻略。可以在实现过程中注意到以下几个方面：

• 添加 DOM 结构、设计样式和添加事件处理函数的顺序。先把结构和样式基本完成，再添加相应的事件处理函数；
• 使用 jQuery 控制动画效果时，可以使用其自带的 fadeIn()、fadeOut() 函数，或是使用其他更高级的动画函数；
• 在注册事件监听器时，可以使用 on() 函数，实现更灵活、更高级的事件处理方案。