弹出提示消息层

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