html弹出框

html

<!--弹出框-->
<div class="test-alert">
    <button class="showMore">查看更多</button>
    <div id="mask"></div>
    <div id="alert-container" style="display: none;">
        <div class="alert-content"></div>
        <div id="close-alert-container">收起</div>
    </div>
</div>

#mask {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 50;
}

#alert-container {
    display: none;
    width: 800px;
    background-color: white;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    z-index: 60;
}

#alert-container p {
    margin: 0;
}

div.alert-content {
    z-index: 100;
}

#close-alert-container {
    border: 1px solid #005BAC;
    color: #005BAC;
    width: 100px;
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
}

button.showMore {
    margin: 200px auto;
}

div.test-alert {
    width: 1200px;
    margin: 0 auto;
    /*使window中的button居中*/
    text-align: center;
}

body {
    margin: 0;
}

var txt = '<p>只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现</p>';
        $("button.showMore").click(function() {
            $(".alert-content").append(txt);
            $("#mask").css('display', 'block');
            $("#alert-container").css("display", "block");
        });
    
        $("#close-alert-container").click(function() {
            $("#mask").css('display', 'none');
            $("#alert-container").css('display', 'none');
            $(".alert-content p").remove();
        })

html弹出框

推荐阅读更多精彩内容