html弹出框

1. html

    查看更多
    

    

        

        
收起
    

2. css

#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;
}

3. js

var txt = '
只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现只要你有想法，我们来帮你实现
';
        $("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();
        })