前端之网页布局实现弹窗效果

        本案例通过使用jquery实现弹窗效果：

        首先设置需要弹窗的类:

      <div class="popup">
            <div class="popup-content">
                <p>假如生活护龙了你</p>
                <p>表吱声</p>
                <p>表咋呼</p>
                <p>表嘟囔</p>
                <p>也表年息儿</p>
                <p>更表哭丧个脸子</p>
                <p>你从哪儿跌倒</p>
                <p>就在哪儿爬一会儿</p>
                <p>也表起来</p>
                <p>一直往前顾应</p>
                <p>像毛毛虫一样</p>
                <p>顾应。。。顾应</p>
                <p>一直顾应</p>
                <p>总有一天</p>
                <p>你会变成</p>
                <p>有翅膀的</p>
                <p>扑棱蛾子</p>
                <p>到时候一抖搂翅膀</p>
                <p>想他么怎么飞就怎么飞</p>
                <button class="popup-close">关闭弹窗</button>
            </div>
            <div class="popup-bg"></div>
        </div>

        而后设置触发按钮:

<div>
   <a href=".popup" class="link-popup">弹窗</a>
</div>

    设置其中的样式:

.popup {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transform: all .5s;
}
.popup-content {
    position: absolute;
    z-index: 200;
    width: 700px;
    height: 400px;
    box-shadow: border-box;
    left: 50%;
    top: 50%;
    margin-left: -350px;
    margin-top: -200px;
    padding: 30px 50px;
    background: #fff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .15);
    text-align: center;
    overflow: auto;
}

.popup-content p {
    color: #888;
    font-size: 21px;
}

.popup-content button {
    color: #fff;
    background: red;
    border-radius: 4px;
    border: 0;
    font-size: 21px;
    padding: 10px 50px;
}

.popup-bg {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
}

    其中的 z-Index 属性设置元素的堆叠顺序。

    该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

    所以popup-bg的z-index值比popup-content的值小，突出了popup-content的效果。
    

    而后使用jquery实现弹窗效果：

    

$(document).ready(function () {
        $('a.link-popup, .popup-close, .popup-bg').on('click', function (e) {
            e.preventDefault();
            $('.popup').toggleClass('show');
        });
    });

    其中的e.preventDefault();是为了防止连接打开url();

    需要注意的是jquery需要引入文件包;

    如此便实现了弹窗功能;