<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
button {
border: 0;
padding: 1em 2em;
background: coral;
color: #fff;
outline: none;
}
button:hover {
background: #333;
}
.modal {
display: none;
100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
animation: modalOpen 0.6s;
}
.modal-content {
80%;
margin: 100px auto;
background: #f4f4f4;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2),
0 7px 20px 0 rgba(0, 0, 0, 0.5);
}
.modal-header {
background: coral;
color: #fff;
display: flex;
padding: 0px 16px;
}
.modal-header h3 {
height: 50px;
line-height: 50px;
flex: 1;
}
.modal-header span {
display: block;
height: 50px;
line-height: 50px;
font-size: 30px;
cursor: pointer;
}
.modal-body {
padding: 5px 15px;
line-height: 1.6em;
}
.modal-footer {
padding: 0px 15px;
background: coral;
color: #fff;
}
.modal-footer p {
height: 40px;
line-height: 40px;
}
@keyframes modalOpen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<button class="open-btn">弹窗</button>
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>弹窗头部</h3>
<span class="close-btn">×</span>
</div>
<div class="modal-body">
<h3>body</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
voluptatibus omnis, iste sunt maiores eius iusto error mollitia
deleniti, temporibus explicabo est tenetur facilis consequuntur
deserunt molestias rem adipisci id? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est nostrum, natus provident minima
libero, excepturi fugit quae voluptatum cumque amet, tempore aliquid
id. Ad mollitia itaque aperiam repudiandae, aliquam ea!
</p>
</div>
<div class="modal-footer">
<p>弹窗底部</p>
</div>
</div>
</div>
<script>
var closeBtn = document.querySelector(".close-btn");
var openBtn = document.querySelector(".open-btn");
var modal = document.querySelector(".modal");
var modalContent = document.querySelector(".modal-content");
closeBtn.addEventListener("click", closeModal);
openBtn.addEventListener("click", openModal);
modal.addEventListener("click", closeModal);
modalContent.addEventListener("click", function(e) {
e.stopPropagation();
e.preventDefault();
return false;
});
function closeModal() {
modal.style.display = "none";
}
function openModal() {
modal.style.display = "block";
}
</script>
</body>
</html>