Popup 弹窗效果（L01）

• html

这里主要还是一些样式的内容

 <button id="openBtn" class="button">弹窗。。。点击</button>

    <!-- 弹出效果内容 -->

    <div id="modalView" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="closeBtn">&times;</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";
        }
    })

复制代码