自定義彈窗設計一
<!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>
<!-- js -->
<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>
自定義彈窗設計一