弹窗上下展开

在网页中弹窗效果很常见,普遍的展开、关闭,一般都是display:block 、display:none。但是这样显得很僵硬,这里就利用jQuery来上下展开的效果,增加弹框的B格

《弹窗上下展开》
效果图

HTML代码:

<div class="showUnfold">展开</div>
<div class="showUnfoldSize">
    <div class="showUnfoldwords">
        <div class="showUnfoldClose">X</div>
        <p>这是展开盒子的内容</p>
        <p>这是展开盒子的内容</p>
        <p>这是展开盒子的内容</p>
        <p>这是展开盒子的内容</p>
    </div>
</div>

CSS代码:

html,body {padding: 0;margin: 0;}
.showUnfold {
    font-size: 16px;color: #666;cursor: pointer;width: 200px;
    height: 40px;margin: 100px 0 0 100px;border: 1px solid #ccc;
    text-align: center;line-height: 40px;user-select: none;
}
.showUnfoldSize {
    position: fixed;display: none;width: 100%;height: 100%;
    background: rgba(0, 0, 0, .6);left: 0;top: 0;
    z-index: 999;opacity: 0;
}
.showUnfoldwords {
    background: #fff;position: absolute;top: 50%;left: 50%;
    padding: 60px 30px;font-size: 16px;color: #666;
    transform: translate(-50%, -50%);width: 60%;display: none;
}
.showUnfoldClose {
    width: 44px;height: 44px;text-align: center;line-height: 44px;
    font-family: Arial, Helvetica, sans-serif;font-size: 30px;
    background: rgb(204, 63, 63);color: #fff;position: absolute;
    top: 0;right: 0;user-select: none;cursor: pointer;
}

JQ代码:

<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script>
    $(".showUnfold").on("click", function () {
        $(".showUnfoldSize").show();
        $(".showUnfoldSize").animate({
            "opacity": "1"
        }, 600);
        $(".showUnfoldwords").slideDown();
    });
    $(".showUnfoldClose").on("click", function () {
        $(".showUnfoldwords").slideUp();
        $(".showUnfoldSize").animate({
            "opacity": "0"
        }, 600, function () {
            $(".showUnfoldSize").hide();
        });
    });
</script>
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注