• 售前

  • 售后

热门帖子
入门百科

js实现点击弹窗弹出登录框

[复制链接]
yfyffuuy 显示全部楼层 发表于 2021-10-26 13:36:08 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js实现点击弹窗弹出登录框的详细代码,供各人参考,详细内容如下
1 图片预览


2 index.html代码
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>js点击弹窗弹出登录框代码</title>
  8. </head>
  9. <body>
  10.   <style>
  11.    *{
  12.     margin:0;
  13.     padding:0;
  14.    }
  15.          button, input{
  16.     outline:none;
  17.    }
  18.    button, .login{
  19.     width:120px;
  20.     height:42px;
  21.     background:#f40;
  22.     color:#fff;
  23.     border:none;
  24.     border-radius:6px;
  25.     display: block;
  26.     margin:20px auto;
  27.     cursor: pointer;
  28.    }
  29.    .popOutBg{
  30.     width:100%;
  31.     height:100%;
  32.     position: fixed;
  33.     left:0;
  34.     top:0;
  35.     background:rgba(0,0,0,.6);
  36.     display: none;
  37.    }
  38.    .popOut{
  39.     position:fixed;
  40.     width:600px;
  41.     height:300px;
  42.     top:50%;
  43.     left:50%;
  44.     margin-top:-150px;
  45.     margin-left:-300px;
  46.     background:#fff;
  47.     border-radius:8px;
  48.     overflow: hidden;
  49.     display: none;
  50.    }
  51.    .popOut > span{
  52.     position: absolute;
  53.     right:10px;
  54.     top:0;
  55.     height:42px;
  56.     line-height:42px;
  57.     color:#000;
  58.     font-size:30px;
  59.     cursor: pointer;
  60.    }
  61.    .popOut table{
  62.     display: block;
  63.     margin:42px auto 0;
  64.     width:520px;
  65.    }
  66.    .popOut caption{
  67.     width:520px;
  68.     text-align: center;
  69.     color:#f40;
  70.     font-size:18px;
  71.     line-height:42px;
  72.    }
  73.    .popOut table tr td{
  74.     color:#666;
  75.     padding:6px;
  76.     font-size:14px;
  77.    }
  78.    .popOut table tr td:first-child{
  79.     text-align: right;
  80.    }
  81.    .inp{
  82.     width:280px;
  83.     height:30px;
  84.     line-height:30px;
  85.     border:1px solid #999;
  86.     padding:5px 10px;
  87.     color:#000;
  88.     font-size:14px;
  89.     border-radius:6px;
  90.    }
  91.    .inp:focus{
  92.     border-color:#f40;
  93.    }
  94.    @keyframes ani{
  95.     from{
  96.      transform:translateX(-100%) rotate(-60deg) scale(.5);
  97.     }
  98.     50%{
  99.      transform:translateX(0) rotate(0) scale(1);
  100.     }
  101.     90%{
  102.      transform:translateX(20px) rotate(0) scale(.8);
  103.     }
  104.     to{
  105.      transform:translateX(0) rotate(0) scale(1);
  106.     }
  107.    }
  108.    .ani{ animation:ani .5s ease-in-out;}
  109.   </style>
  110.   <button type="button">登录</button>
  111.   <div class="popOutBg"></div>
  112.   <div class="popOut">
  113.    <span title="关闭"> x </span>
  114.    <table>
  115.     <caption>欢迎登录本网站</caption>
  116.     <tr>
  117.      <td width="120">用户名:</td>
  118.      <td><input type="text" class="inp" placeholder="请输入用户名" /></td>
  119.     </tr>
  120.     <tr>
  121.      <td>密码:</td>
  122.      <td><input type="password" class="inp" placeholder="请输入密码" /></td>
  123.     </tr>
  124.     <tr>
  125.      <td colspan="2"><input type="button" class="login" value="登录" /></td>
  126.     </tr>
  127.    </table>
  128.   </div>
  129.   <script type="text/javascript">
  130.    function $(param) {
  131.     if (arguments[1] == true) {
  132.      return document.querySelectorAll(param);
  133.     } else {
  134.      return document.querySelector(param);
  135.     }
  136.    }
  137.    function ani() {
  138.     $(".popOut").className = "popOut ani";
  139.    }
  140.    $("button").onclick = function() {
  141.     $(".popOut").style.display = "block";
  142.     ani();
  143.     $(".popOutBg").style.display = "block";
  144.    };
  145.    $(".popOut > span").onclick = function() {
  146.     $(".popOut").style.display = "none";
  147.     $(".popOutBg").style.display = "none";
  148.    };
  149.    $(".popOutBg").onclick = function() {
  150.     $(".popOut").style.display = "none";
  151.     $(".popOutBg").style.display = "none";
  152.    };
  153.   </script>
  154. </body>
  155. </html>
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作