- html
这里主要还是一些样式的内容
<button id="openBtn" class="button">弹窗。。。点击</button>
<!-- 弹出效果内容 -->
<div id="modalView" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="closeBtn">×</span>
<h3>这个是个弹出层效果内容,你看看就好</h3>
</div>
<div class="modal-body">
<h4>关雎</h4>
<p>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</p>
<p>参差荇菜,左右流之。窈窕淑女,寤寐求之。</p>
<p>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</p>
<p>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</p>
<p>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</p>
</div>
<div class="modal-footer">
<h3>我只是个路过的傻逼而已!</h3>
</div>
</div>
</div>
复制代码
html结构简单
- css
在于对弹出层的样式
.modal {
display: none;
position: fixed; <!--定位方式-->
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(88, 84, 84, 0.5);
z-index: 1; <!--层级要明确-->
overflow: auto;
}
.modal-content {
background-color: rgb(202, 226, 226);
margin: 10% auto 0;
width: 80%;
box-shadow: 0 5px 5px 0 rgb(219, 179, 179, 0.5);
animation-name: modalopen;
animation-duration: 2s;
}
<!--过度动画-->
@keyframes modalopen {
from {
opacity: 0
}
to {
opacity: 1
}
}
复制代码
- js
这里主要是监听按钮事件内容
var modal = document.getElementById('modalView');
var button = document.getElementById('openBtn');
var closeBtn = document.getElementsByClassName('closeBtn')[0];
// 监听打开按钮
button.addEventListener('click', function(e){
modal.style.display = "block";
});
// 监听关闭按钮
closeBtn.addEventListener('click', function (e) {
modal.style.display = "none";
})
// 监听点击外侧事件
window.addEventListener('click', function (e) {
// modal = 当前获取的对象
if(e.target == modal){
modal.style.display = "none";
}
})
复制代码