<body>
<button class="open-btn">click</button>
<div class="modal-wrapper">
<div class="modal-content">
<span class="close-btn">×</span>
<p>Hello World</p>
</div>
</div>
<script>
let openBtn = document.querySelector('.open-btn');
let closeBtn = document.querySelector('.close-btn');
let modalWrapper = document.querySelector('.modal-wrapper');
function toggleShow() {
modalWrapper.classList.toggle('show');
}
openBtn.addEventListener('click', toggleShow);
closeBtn.addEventListener('click', toggleShow);
window.addEventListener('click', function (e) {
if (e.target === modalWrapper) toggleShow();
});
</script>
</body>
<style>
.modal-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
/* visibility有过渡动画效果 display:none(元素不存在) 都没有 */
visibility: hidden;
/* 初始时、移除show时过渡效果、时间 */
transition: all 0.1s ease;
transform: scale(1.1);
opacity: 0;
}
/* 添加show进入时动画时，过渡效果、时间 */
.show {
visibility: visible;
opacity: 1;
/* 这如果没有transform，就是opacity: 1 -> 0效果 */
transform: scale(1);
transition: all 0.1s ease;
}
.modal-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 900px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
}
.close-btn {
float: right;
color: lightgray;
cursor: pointer;
}
.close-btn:hover {
color: #000;
}
</style>
网友评论