弹出提示消息层

MR·Feng

于 2017-09-02 11:50:25 发布

阅读量355

点赞数 1

分类专栏： html css js 文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/weihaifeng163/article/details/77800186

版权

js 同时被 3 个专栏收录

20 篇文章

订阅专栏

html

11 篇文章

订阅专栏

css

6 篇文章

订阅专栏

1、html部分

<div class="prompt-info"></div>

2、css部分

.prompt-info {
    min-width: 10rem;
    padding: 0.5rem 1.5rem;
    min-height: 3.5rem;
    position: fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: -5%;
    background-color: rgba(0, 0, 0, .8);
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 3.5rem;
    border-radius: 5px;
    display: none;
    z-index: 1000;
}

3、js函数调用部分

    function prompt(warm) {
        $(".prompt-info").text(warm);
        $(".prompt-info").slideToggle(function() {
            var self = $(this);
            self.show();
            self.animate({top: '50%'}, 300, function() {
                setTimeout(function() {
                    self.animate({top: "100%"}, 300, function() {
                        self.animate({top: "-5%"});
                        self.hide();
                    });
                }, 3000);
            });
        });
    }