世界上最伟大的投资就是投资自己的教育
如何用 HTML css 和 JavaScript 写一个模态框(modal)
随风发布于3600 次阅读
先看下效果:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Modal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button id="modalBtn" class="button">Click Here</button>
<div id="simpleModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="closeBtn">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Hello...I am a modal</p>
<p>Lorem ipsum dolor sit amet, consectetur magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
var modal = document.getElementById('simpleModal');
var modalBtn = document.getElementById('modalBtn');
var closeBtn = document.getElementsByClassName('closeBtn')[0];
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
function openModal() {
modal.style.display = "block";
}
function closeModal() {
modal.style.display = 'none';
}
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
}
style.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.6;
}
.button {
background: coral;
padding: 1em 2em;
color: #fff;
border: 0;
}
.button:hover {
background: #333;
}
.button:focus {
outline: none;
}
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #f4f4f4;
margin: 20% auto;
width: 70%;
box-shadow: 0 5p 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
animation-name: modalopen;
animation-duration: 3s;
}
.modal-header {
background: coral;
padding: 15px;
color: #fff;
}
.modal-body {
padding: 10px 20px;
}
.modal-footer {
background: coral;
padding: 10px;
color: #fff;
text-align: center;
}
.closeBtn {
color: #ccc;
float: right;
font-size: 30px;
color: #fff;
}
.closeBtn:hover, .closeBtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
@keyframes modalopen {
from { opacity: 0 }
to { opacity: 1 }
}
完结。
本站文章均为原创内容,如需转载请注明出处,谢谢。
0 条回复
暂无回复~~
© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn
粤公网安备 44152102000088号 | 粤ICP备19038915号
Top