自定义弹窗设计一

<!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;
padding: 200px auto;
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

/* 添加动画 */
@-webkit-keyframes animatetop {
from {top:-200px; opacity:0}
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-200px; opacity:0}
to {top:0; opacity:1}
}

/* 关闭按钮 */
.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>

<script type="text/javascript">
function openwindow(){
//获取弹窗得div
var modal = document.getElementById('myModal');
// 获取 <span> 元素，用于关闭弹窗（X）
var span = document.getElementsByClassName("close")[0];
//获取弹窗中得确定按钮
var ok=document.getElementsByClassName("ok")[0];
//获取弹窗中得取消按钮
var no=document.getElementsByClassName("no")[0];
//窗体弹出
modal.style.display = "block";
//点击窗体ok
ok.onclick=function(){
//执行弹出窗体得确定后得操作
alert("执行确定按钮点击得操作");
//关闭窗口
modal.style.display = "none";
}
//点击窗体取消按钮
no.onclick=function(){
//直接关闭窗口
modal.style.display = "none";
}
// 点击 <span> (x), 关闭弹窗
span.onclick = function() {
//直接关闭窗口
modal.style.display = "none";
}
// 在用户点击其他地方时，关闭弹窗
window.onclick = function(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">
<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>

自定义弹窗设计一

猜你喜欢