jQuery实现的登录浮动框效果代码

下面是简单的“jQuery实现的登录浮动框效果代码”的攻略：

1. 准备工作

在使用jQuery之前，需要先在HTML文件中导入jQuery库。在头部添加以下代码即可：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2. HTML结构

登录浮动框的HTML结构需要包含一个登录按钮，点击按钮时显示登录框。此外还需要一个背景遮罩层，点击遮罩层可以关闭登录框。具体HTML代码如下：

<body>
    <button id="loginBtn">登录</button>
    <div id="overlay"></div>
    <div id="loginBox">
      <h1>登录</h1>
      <form>
        <p>用户名：</p>
        <input type="text" placeholder="请输入用户名">
        <p>密码：</p>
        <input type="password" placeholder="请输入密码">
        <input type="submit" value="登录">
      </form>
    </div>
  </body>

3. CSS样式

定义好浮动框、遮罩层和登录按钮的CSS样式，使得它们呈现期望的效果。下面是CSS样式代码，仅作示范，实际情况下需要根据具体设计进行调整：

#loginBox {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  width: 500px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  display: none;
}

#overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
  display: none;
}

button {
  background-color: #f44336;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #fc6656;
}

4. JavaScript代码实现

在HTML文件底部导入JavaScript文件，包含以下代码：

$(function () {
  //当点击登录按钮时，显示登录框和遮罩层
  $('#loginBtn').on('click', function () {
    $('#loginBox').fadeIn();
    $('#overlay').fadeIn();
  });

  //当点击遮罩层时，隐藏登录框和遮罩层
  $('#overlay').on('click', function () {
    $('#loginBox').fadeOut();
    $('#overlay').fadeOut();
  });
});

上述代码使用jQuery来操作DOM元素，实现点击登录按钮时浮动框和遮罩层的显示和隐藏。

示例说明一：

假设有一个简单的博客网站页面，想要添加登录浮动窗口效果，避免用户在页面的头部或底部进行查找登录入口，可以在HTML的body标签最下方添加如下代码：

<script src="./login.js"></script>

<link rel="stylesheet" href="./login.css">

示例说明二：

在一个社交网站中，需要经常登录和注册。将登录和注册的弹窗效果提升，则可以在该论坛的主题主页上进行修改，在HTML结构中添加如下代码：

<div id="signup"> 注册 </div>
      <div id="login"> 登录 </div>

      <div id="overlay"></div>
      <div id="signupBox"> 
        <form style="height: 190px;">
          <h2>注册新帐户</h2>
          <label for="signupName"><i class="fas fa-user"></i></label>
          <input type="text" class="text-box" id="signupName" name='signupName' placeholder='Username'></input>
          <label for="signupEmail"><i class="fas fa-envelope"></i></label>
          <input type="email" class="text-box" id="signupEmail" name='signupEmail' placeholder='Email'></input>
          <label for="signupPassword"><i class="fas fa-lock"></i></label>
          <input type="password" class="text-box" id="signupPassword" name='signupPassword' placeholder='Password'></input>
          <div id="signupBox-actions">
            <input type="submit" value="注册" class="action" id="signup-submit"></input>
          </div>
        </form>
      </div>

      <div id="loginBox"> 
        <form style="height: 190px;">
          <h2>欢迎回来！</h2>
          <label for="loginEmail"><i class="fas fa-envelope"></i></label>
          <input type="email" class="text-box" id="loginEmail" name='loginEmail' placeholder='Email'></input>
          <label for="loginPassword"><i class="fas fa-lock"></i></label>
          <input type="password" class="text-box" id="loginPassword" name='loginPassword' placeholder='Password'></input>
          <div id="loginBox-actions">
            <input type="submit" value="登录" class="action" id="login-submit"></input>
          </div>
        </form>
      </div>

除此之外，登录界面、注册界面和登录按钮的CSS样式也应该被导入到代码中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现的登录浮动框效果代码 - Python技术站

jQuery实现的登录浮动框效果代码

1. 准备工作

2. HTML结构

3. CSS样式

4. JavaScript代码实现

相关文章