HTML弹框输⼊
在做项⽬的过程中，我们时常需要进⾏⼀些弹框操作，⽐如在后台管理时需要进⾏的⼀些增删改操作，这个时候我们需要使⽤到弹框，或者在⽹站浏览时进⾏弹框输⼊，博主也曾经在开发时使⽤⼀个个页⾯的⽅式，但那样的前端效果不太美观，今天，闲来⽆事，分享给⼤家⾃⼰写的⼀个前端的弹框demo，话不多说，直接上图：
以下是相关代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="js/index.js"></script>
</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>
<div class="test"><h1>弹框登录，输⼊⽂字，可开发与后台交互，直接⽤</h1></div>
<button id="btn_2">弹框提⽰</button>
<div class="dialog">
<div class="title">恭喜：操作成功!</div>
<div class="btn_2">确定</div>
<div class="close_1">取消</div>
</div>
<div class="test"><h1>弹框提⽰，⾃⾏修改提⽰内容即可</h1></div>
html里的float是什么意思</body>
</html>
index.css
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;
}
index.js
var btn_ElementById("btn_1");
var btn_ElementById("btn_2");
var ElementsByClassName("close");
var close_ElementsByClassName("close_1"); var ElementsByClassName("dialog"); var form_ElementsByClassName("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';
})
}
⼤家可以⾃主对其进⾏修改哟！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论