html弹框式Form表单输入
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>
body{margin: 0,0,0,0;overflow: hidden;
}
.main{margin: 0,0,0,0;overflow: hidden;
}
button{width:200px;height:60px;font-size: 25px;background-color:#21bf73 ;color: white;border:none;border-radius: 10px;}
.form_1{width:400px;height:300px;border:3px solid #f8f8f8;visibility: hidden;position: absolute;z-index: 999;opacity: 1;overflow: hidden;background-color: white;text-align: center;margin-top: 10%;margin-left: 35%;border-radius: 10px;
}
.open{visibility: visible;opacity: 1;
}
.input_1{margin-top: 15px;width:100%;height:40px;}
input{width:280px;height:30px;border-radius: 5px;border:1px solid #e5dfdf;
}
.input_1 .login_logo{text-align: left;font-size: 20px;font-weight: 300;padding-left: 30px;float: left;
}
.input_1 .close{width:20px;height:20px;color:#5d5d5d;text-align: center;line-height: 20px;border:1px solid #5d5d5d;border-radius: 50%;float: right;padding-top: 0px;margin-right: 10px;font-size: 12px;
}
.input_1 .close:hover{cursor:pointer;
}
hr{background-color: #F8F8F8;
}.input_1 .submit_1{border:2px solid #f88020;height:40px;background-color: white;
}
.input_1 .submit_1:hover{background-color: #f88020;color:white;
}
.test{overflow: hidden;
}
#btn_2{background-color: #F88020;
}
.dialog{width:300px;height:120px;border:2px solid #46b3e6;overflow: hidden;visibility: hidden;z-index: 999;overflow: hidden;opacity: 1;position: absolute;background-color: white;margin-top: 5%;margin-left: 40%;
}
.dialog .title{text-align: center;font-size: 20px;font-weight: 300;margin-top: 28px;margin-bottom: 25px;
}
.dialog .btn_2{width:50%;height:40px;float:left;background-color: #dff6f0;line-height: 40px;color: black;text-align: center;margin-bottom: 0px;
}
.dialog .btn_2:hover{background-color:#F88020 ;
}
.dialog .close_1{overflow: hidden;width:50%;height:40px;background-color: red;margin-bottom: 0px;line-height: 40px;color: white;text-align: center;
}
.dialog .close_1:hover{background-color: #f4f4f4;color:red;cursor: cell;
}</style></head><body><div class="main"><button id="btn_1"> 用户登录</button><div class="form_1"><form ><div class="input_1"><div class="login_logo">用户登录</div><div class="close">X</div></div><hr><div class="input_1"><input type="text" name="user" placeholder=" 用户名"></div><div class="input_1"><input type="password" name="password" placeholder=" 密码"></div><div class="input_1"><input class="submit_1" type="submit" value="提 交"></div></form></div></div><button id="btn_2"> 弹 框 提 示</button><div class="dialog"><div class="title">xxxxxxxx 确定吗？</div><div class="btn_2">确定</div><div class="close_1">取消</div></div></body><Script>window.onload=function(){var btn_1=document.getElementById("btn_1");var btn_2=document.getElementById("btn_2");var close=document.getElementsByClassName("close");var close_1=document.getElementsByClassName("close_1");var dialog=document.getElementsByClassName("dialog");var form_1=document.getElementsByClassName("form_1");btn_1.addEventListener('click',function(){form_1[0].className="form_1 open"; })close[0].addEventListener('click',function(){form_1[0].className="form_1";})btn_2.addEventListener('click',function(){dialog[0].style.visibility='visible';})close_1[0].addEventListener('click',function(){dialog[0].style.visibility='hidden';}) }</Script>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
