jQuery消息框弹出效果

这也算是我在网上找到的比较简易的弹出效果了

HTML

<div class="main">
    <div class="promptBox">
        <div class="prompt">
            <label class="prompt_text">您查找的信息不存在！</label>
            <button class="prompt_cancel"></button>
        </div>
    </div>
</div>

CSS

.main {
    display: none;
}

.promptBox{
    display: none;
}

.prompt {
    height: 50px;
    width: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    border: #ffffff;
}

.prompt_text {
    width: 200px;
}

.prompt_cancel {
    background: url('../image/cancel.png') no-repeat;
    border: none;
    width: 12px;
    height: 12px;
    margin-left: -25px;
}

JS

$(function () {
    $('#btn').click(function () {
        $(".main").fadeIn();
        $('.promptBox').delay(300).slideDown();
    });
    $('.prompt_cancel').click(function () {
        $('.promptBox').fadeOut();
    });
});

最后的效果如下: