在做項目的過程中，我們時常需要進行一些彈框操作，比如在後臺管理時需要進行的一些增刪改操作，這個時候我們需要使用到彈框，或者在網站瀏覽時進行彈框輸入，博主也曾經在開發時使用一個個頁面的方式，但那樣的前端效果不太美觀，今天，閒來無事，分享給大家自己寫的一個前端的彈框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>
</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
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';
})
}
大家可以自主對其進行修改喲！