原生js => 实现模态框-CSDN博客

先看实现的的效果

具体代码如下所示
.html

<!-- 模态框 -->
<section class="modal">
	<div class="modal-info center-self-xy mYBounceInDown">
		<div class="modal-t">
			<p class="center-self-xy">你确定删除这个商品么?</p>
		</div>
		<div class="modal-b clearfix">
			<button class="fl cancel">取消</button>
			<button class="fr sure">确定</button>
		</div>
	</div>
</section>
复制代码

.css

/* 水平垂直居中公共类 */
.center-xy:before,.center-self-xy {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
/* 模态框 */
.modal {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,.5);
	z-index: 9999;
	display: none;
}
.modal-info {
	width: 80%;
	height: 160px;
	background-color: #fff;
	border-radius: 5px;
	padding:10px;
	box-sizing:border-box;
}
.modal-t {
	height: 90px;
	text-align: center;
	position: relative;
}
.modal-t p {
	width: 100%;
}
.modal-b {
	border-top: 1px solid #ccc;
	padding-top: 10px;
}
.modal button {
	width: 45%;
	height: 40px;
	border-radius: 5px;
	border: 1px solid #ccc;
	background-color: #fff;
}
.modal button.sure{
	background-color: #D90000;
	color: #fff;
}
@keyframes mYBounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(-50%, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-50%, -30%, 0);
  }

  75% {
    transform: translate3d(-50%, -60%, 0);
  }

  90% {
    transform: translate3d(-50%, -45%, 0);
  }

  to {
    transform: translate3d(-50%, -50%, 0);
  }
}

.mYBounceInDown {
  animation: mYBounceInDown ease 1s forwards;
}
复制代码

.js

;(function(){

	// 垃圾桶动画
	var del = document.querySelectorAll('.del-wrap');
	var modal = document.querySelector('.modal');
	var gz = null;
	for (const data of del) {
		data.addEventListener('click',function(){
			// 找到自己点击的那个垃圾桶的盖子
			gz = this.querySelector('.del-t');

			gz.style.transform = 'rotate(-20deg) translateX(-2px)';

			modal.style.display = 'block';
		})
	}
	// 点击取消按钮关闭模态框
	var cancel = modal.querySelector('.cancel');
	cancel.addEventListener('click',function(){
		// 关闭模态框
		modal.style.display = 'none';
		// 关闭盖子
		gz.style.transform = 'none';
	})
})()
复制代码