js实现点击弹窗弹出登录框
更新时间：2021年04月20日 12:03:05 作者：&小小白&
这篇文章主要为大家详细介绍了js实现点击弹窗弹出登录框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码，供大家参考，具体内容如下
1 图片预览
2 index.html代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js点击弹窗弹出登录框代码</title>
</head>
<body>
<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>
<button type="button">登录</button>
<div class="popOutBg"></div>
<div class="popOut">
<span title="关闭"> x </span>
<table>
<caption>欢迎登录本网站</caption>
<tr>
<td width="120">用户名：</td>
<td><input type="text" class="inp" placeholder="请输入用户名" /></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>
</table>
</div>
<script type="text/javascript">
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Web性能优化系列 10个提升JavaScript性能的技巧
Javascript 性能优化绝不是一种书面的技术，Nicholas 的技术演进列出了10条建议，帮助你写出高效的 JS 代码2016-09-09
本文主要介绍了js, jQuery实现全选、反选功能的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
基于BootstrapValidator的Form表单验证(24)
这篇文章主要为大家详细介绍了基于BootstrapValidator的Form表验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本文给大家分享的是使用正则表达式检测只含有汉字、数字、字母、下划线等示例，非常的简单实用，这里推荐给大家，有需要的小伙伴参考下。2015-04-04
javascript:void(0) 在某些情况下会有浏览器不兼容的bug。下面我们先来看下javascript:void(0) 的基础介绍及用法，然后再来看使用它会出现什么问题，该怎么解决，感兴趣的朋友跟随小编一起看看吧2023-10-10
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
这篇文章主要介绍了关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法 的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了如何使用JS实现一个这样的拖拽缩放效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
这篇文章主要给大家介绍了关于Bootstrap开发中Tab标签页切换图表显示问题的解决方法，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
重复提交、重复刷新、防止后退等等都是属于系统为避免重复记录而需要解决的问题，在客户端去处理需要针对每一种的可能提出相应的解决方案，然而在服务器端看来只不过是对于数据真实性的检验问题2012-09-09
这篇文章主要介绍了javascript结合CSS实现苹果开关按钮特效的方法以及全部代码，效果非常不错，兼容性也很好，有需要的小伙伴自己参考下2015-04-04
最新评论