<!DOCTYPE html>
<html>
<head>
<title>自写弹窗</title>
</head>
<!-- 样式 -->
<style type="text/css">
/* 弹窗 (background) */
.modal {
display: none; /* 默认隐藏 */
/*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
position: fixed;
z-index: 1;
left: 0;
top: 0;
/*设置弹窗位置*/
padding-top: 200px;
padding-bottom: 300px;
/*浮在全屏上*/
width: 100%;
height: 100%;
/*overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。*/
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
text-align: center;
}
/* 弹窗内容 */
.modal-content {
position: relative;
/*弹窗背景色设置*/
background-color: #fefefe;
margin: auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
width: 400px;
height: 320px;
}
.modal-open{
-webkit-animation-name: animatetop;
-webkit-animation-duration: .3s;
animation-name: animatetop;
animation-duration: .3s;
animation-direction: normal;
}
.modal-close{
-webkit-animation-name: animateclose;
-webkit-animation-duration: .3s;
animation-name: animateclose;
animation-duration: .3s;
animation-direction: normal;
}
/* 添加动画 */
@-webkit-keyframes animatetop {
from {top:-200px; opacity:0;width: 0px;transform: scale(0, 0);}
to {top: -200px;top:0; opacity:1;width: 400px;transform: scale(1, 1);}
}
@keyframes animatetop {
from {top:-200px; opacity:0;width: 0px;transform: scale(0, 0);}
to {top: -200px;top:0; opacity:1;width: 400px;transform: scale(1, 1);}
}
@-webkit-keyframes animateclose {
from {top:0; opacity:1;width: 400px;transform: scale(1, 1);top: 0px;top:-200px; opacity:0;width: 0px;transform: scale(0, 0);top: -200px;}
to {top:-200px; opacity:0;width: 0px;transform: scale(0, 0);top: -200px;}
}
@keyframes animateclose {
from {top:0; opacity:1;width: 400px;transform: scale(1, 1);top: 0px; }
to {top:-200px; opacity:0;width: 0px;transform: scale(0, 0);top: -200px;}
}
/* 关闭按钮 */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
display: block;
line-height: 30px;
padding: 2px 10px;
background-color: blue;
color: white;
text-align: left;
}
.modal-body {
padding: 2px 16px;
font-size: 18px;
height: 200px;
}
.modal-footer {
display: block;
line-height: 30px;
padding: 2px 10px;
background-color: blue;
color: white;
}
</style>
<!-- js -->
<script type="text/javascript">
function openwindow(){
//获取弹窗得div
var modal = document.getElementById('myModal');
var modalc = document.getElementById('myModalc');
// 获取 <span> 元素，用于关闭弹窗 （X）
var span = document.getElementsByClassName("close")[0];
//获取弹窗中得确定按钮
var ok=document.getElementsByClassName("ok")[0];
//获取弹窗中得取消按钮
var no=document.getElementsByClassName("no")[0];
//窗体弹出
modal.style.display = "block";
myModalc.classList.add("modal-open");
myModalc.classList.remove("modal-close");
//点击窗体ok
ok.onclick=function(){
//执行弹出窗体得确定后得操作
//alert("执行确定按钮点击得操作");
//关闭窗口
myModalc.classList.remove("modal-open");
myModalc.classList.add("modal-close")
setTimeout(function () {
modal.style.display = "none";
},300)
}
//点击窗体取消按钮
no.onclick=function(){
//直接关闭窗口
modal.style.display = "none";
}
// 点击 <span> (x), 关闭弹窗
span.onclick = function() {
//直接关闭窗口
modal.style.display = "none";
}
// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
console.log(event);
//点击窗口外内容，关闭窗口
if (event.target == modal) modal.style.display = "none";
}
}
</script>
<body>
<div align="center" style="margin: 50 auto">
<h2>自定义弹窗设计</h2>
<button onclick="openwindow()">打开弹窗</button>
</div>
<!-- 弹窗隐藏区域 -->
<div id="myModal" class="modal">
<!-- 弹窗内容 -->
<div class="modal-content" id="myModalc">
<div class="modal-header">
<span class="close">×</span>
<h2>器件信息添加</h2>
</div>
<div class="modal-body">
<p>这是你需要设计填写需求得内容，如登录等等</p>
姓名： <input type="text" name=""><br>
密码： <input type="password" name="">
</div>
<div class="modal-footer">
<button class="ok">确定</button> <button class="no">取消</button>
</div>
</div>
</div>
</body>
</html>
