点击弹窗弹出表单框代码 HTML+css+js全部代码

js点击弹窗弹出登录框代码

*{ 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;}

登录

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";

};