jquery弹窗代码
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jquery弹窗代码 -jq22.com</title> | |
| <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> | |
| <style> | |
| * { | |
| margin:0; | |
| padding:0; | |
| } | |
| button,input { | |
| outline:none; | |
| } | |
| button,.login { | |
| width:120px; | |
| height:42px; | |
| background:#f40; | |
| color:#fff; | |
| border:none; | |
| border-radius:6px; | |
| display:block; | |
| margin:20px auto; | |
| cursor:pointer; | |
| } | |
| .popOutBg { | |
| width:100%; | |
| height:100%; | |
| position:fixed; | |
| left:0; | |
| top:0; | |
| background:rgba(0,0,0,.6); | |
| display:none; | |
| } | |
| .popOut { | |
| position:fixed; | |
| width:600px; | |
| height:300px; | |
| top:50%; | |
| left:50%; | |
| margin-top:-150px; | |
| margin-left:-300px; | |
| background:#fff; | |
| border-radius:8px; | |
| overflow:hidden; | |
| display:none; | |
| } | |
| .popOut > span { | |
| position:absolute; | |
| right:10px; | |
| top:0; | |
| height:42px; | |
| line-height:42px; | |
| color:#000; | |
| font-size:30px; | |
| cursor:pointer; | |
| } | |
| .popOut table { | |
| display:block; | |
| margin:42px auto 0; | |
| width:520px; | |
| } | |
| .popOut caption { | |
| width:520px; | |
| text-align:center; | |
| color:#f40; | |
| font-size:18px; | |
| line-height:42px; | |
| } | |
| .popOut table tr td { | |
| color:#666; | |
| padding:6px; | |
| font-size:14px; | |
| } | |
| .popOut table tr td:first-child { | |
| text-align:right; | |
| } | |
| .inp { | |
| width:280px; | |
| height:30px; | |
| line-height:30px; | |
| border:1px solid #999; | |
| padding:5px 10px; | |
| color:#000; | |
| font-size:14px; | |
| border-radius:6px; | |
| } | |
| .inp:focus { | |
| border-color:#f40; | |
| } | |
| @keyframes ani { | |
| from { | |
| transform:translateX(-100%) rotate(-60deg) scale(.5); | |
| } | |
| 50% { | |
| transform:translateX(0) rotate(0) scale(1); | |
| } | |
| 90% { | |
| transform:translateX(20px) rotate(0) scale(.8); | |
| } | |
| to { | |
| transform:translateX(0) rotate(0) scale(1); | |
| } | |
| }.ani { | |
| animation:ani .5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button type="button">登录</button> | |
| <div class="popOutBg"></div> | |
| <div class="popOut"> | |
| <span title="关闭"> x </span> | |
| <table> | |
| <caption>欢迎登录本网站</caption> | |
| <tbody><tr> | |
| <td width="120">用户名：</td> | |
| <td><input type="text" class="inp" placeholder="请输入用户名" value="admin"></td> | |
| </tr> | |
| <tr> | |
| <td>密码：</td> | |
| <td><input type="password" class="inp" placeholder="请输入密码"></td> | |
| </tr> | |
| <tr> | |
| <td colspan="2"><input type="button" class="login" value="登录"></td> | |
| </tr> | |
| </tbody></table> | |
| </div> | |
| <script> | |
| function $(param) { | |
| if (arguments[1] == true) { | |
| return document.querySelectorAll(param); | |
| } else { | |
| return document.querySelector(param); | |
| } | |
| } | |
| function ani() { | |
| $(".popOut").className = "popOut ani"; | |
| } | |
| $("button").onclick = function() { | |
| $(".popOut").style.display = "block"; | |
| ani(); | |
| $(".popOutBg").style.display = "block"; | |
| }; | |
| $(".popOut > span").onclick = function() { | |
| $(".popOut").style.display = "none"; | |
| $(".popOutBg").style.display = "none"; | |
| }; | |
| $(".popOutBg").onclick = function() { | |
| $(".popOut").style.display = "none"; | |
| $(".popOutBg").style.display = "none"; | |
| }; | |
| </script> | |
| </body> | |
| </html> | |
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：http://www.tukus.cn/cyzd/guan/183.html
