Front-end web page layout to achieve pop-up window effect

        In this case, the pop-up window effect is achieved by using jquery:

        First set the class that needs to pop up:

      <div class="popup">
            <div class="popup-content">
                <p>If life protects you</p>
                <p>Squeak</p>
                <p>A bluff</p>
                <p>Table Mutter</p>
                <p>It is also a sign of interest</p>
                <p>I'm even more embarrassed</p>
                <p>Where did you fall?</p>
                <p>Climb somewhere for a while</p>
                <p>Also show up</p>
                <p>Keep moving forward</p>
                <p>Like a caterpillar</p>
                <p>Gu Ying. . . Gu Ying</p>
                <p>Always take care of it</p>
                <p>One day</p>
                <p>You will become</p>
                <p>Winged</p>
                <p>Flying moth</p>
                <p>It's time to shake your wings</p>
                <p>Fly as much as you want</p>
                <button class="popup-close">关闭弹窗</button>
            </div>
            <div class="popup-bg"></div>
        </div>

        Then set the trigger button:

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

    Set the styles in it:

.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);
}

    The z-Index property in it sets the stacking order of the elements.

    This property sets the position of a positioned element along the z-axis, which is defined as the axis extending vertically to the display area. A positive number means closer to the user, a negative number means further away from the user.

    Therefore, the z-index value of popup-bg is smaller than that of popup-content, which highlights the effect of popup-content.
    

    Then use jquery to achieve the pop-up effect:

    

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

    Among them, e.preventDefault(); is to prevent the connection from opening url();

    It should be noted that jquery needs to introduce file packages;

    In this way, the pop-up window function is realized;