基于jQuery弹出框的登录实现

最新推荐文章于 2021-12-29 20:54:38 发布

沐戈！

最新推荐文章于 2021-12-29 20:54:38 发布

阅读量656

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/admin__istrator/article/details/118876643

版权

在这里插入图片描述
点击登录会出现现下面的弹窗

点击取消弹框会没有

下面展示一些 内联代码片。

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script>
      $(function () {
        $("a").click(function () {
          var $mask = $(
            //要加进页面的内容（弹框内容）
            '<div class="mask">\n' +
              '<div class="login">\n' +
              '<a href="#"><span>取消</span></a>' +
              "<h3>登录框</h3>" +
              "<br />" +
              '<input type="text" placeholder="账号" />' +
              '<input type="password" placeholder="请输入密码" />' +
              '<input type="submit" />' +
              "</div></div>"
          );
          //然后将$mask添加到body里，
          $("body").append($mask);
          /* 事件委托（给新增节点添加事件），点击取消后关闭登录窗口 */
          $("body").delegate(".login>a", "click", function () {
            $mask.remove();
          });
          return false;
        });
      });
    </script>
    <style>
      .mask {
        width: 300px;
        height: 300px;
        background-image: url(../image/2.jpg);
        /* background: rgba(225, 225, 225, 0.7); */
        position: fixed;
        left: 40%;
        top: 20%;
      }
      .login {
        position: relative;
        width: 300px;
        height: 300px;
      }
      input {
        position: relative;
        width: 200px;
        height: 30px;
        margin-top: 30px;
        left: 50px;
        text-align: center;
      }
      span {
        position: absolute;
        right: 0;
        top: -20px;
        background-color: red;
      }
      h3 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- <div class="mask">
      <div class="login">
        <a href="#"><span>取消</span></a>
        <h3>登录框</h3>
        <br />
        <input type="text" placeholder="账号" />
        <input type="password" placeholder="请输入密码" />
        <input type="submit" />
      </div>
    </div> -->
    <div><a href="#">登录</a></div>
    asdl;fksadkdflskfjldskfkldfjlkadfjsadlfjalsdkfjaldsfjkaldsjfaldskjfaldsjkfaldskj
    
  </body>
</html>

后续会写其他的弹框方式

沐戈！

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery弹出框的登录实现

点击登录会出现现下面的弹窗点击取消弹框会没有下面展示一些内联代码片。源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device.
复制链接

扫一扫