Customize the message box, automatically disappear three seconds after it pops up, the message box CSS is centered horizontally and vertically, and the window size is adaptive

<style>
.sys_showMsg {
     
      box-shadow: 0 0 9px 3px #999; color: #ffffff; font-size: 18px; background: #0caa00; border: 1px solid #c1c1c1; position: fixed; width:80%; transform: translate(10%); z-index: 40000; }
	.sys_showMsg .msg_con {
     
      position: relative; /* width: 100%;*/ height: 100%; padding: 20px 40px; }
	.sys_showMsg .closeBtn {
     
      cursor: pointer; position: absolute; right: 0px; top: 0px; width: 19px; height: 19px; background: #d0d0d0; }
</style>
	<script type="text/javascript">
        function generateUUID() {
     
     
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
     
     
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     
     
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }
        var arrMsg09_Index = 0;
        //显示提示消息，自动隐藏
        function showMsg(msg) {
     
     
            var msgId = generateUUID();
             //var top = window.scrollY + 50;
            var top = 50;
            var tran = '';
            if (arrMsg09_Index >= 1) {
     
     
                top += arrMsg09_Index * 70;
                tran = 'transform: translate(' + (10 + arrMsg09_Index) + '%) !important;';
            }
            $("body").append('<div id="' + msgId + '" class="sys_showMsg" style="top:' + top + 'px;' + tran +'"><div class="msg_con">' + msg + '</div><div>');
            arrMsg09_Index++;
            setTimeout(function () {
     
     
                arrMsg09_Index--;
                $('#' + msgId).remove();
            }, 3000);
        }
        //显示提示消息
        function showAlert(msg) {
     
     
             //var top = window.scrollY + 50;
            var top = 50;
            var tran = '';
            if (arrMsg09_Index>=1) {
     
     
                top += arrMsg09_Index * 70;
                tran = 'transform: translate(' + (10 + arrMsg09_Index) +'%) !important;';
            }
            $("body").append('<div class="sys_showMsg" style="top:' + top + 'px;' + tran+'"><div class="msg_con"><div class="closeBtn" οnclick="closeAlert(this)">X</div>' + msg + '</div><div>');
            arrMsg09_Index++;       
        }
        //关闭alert消息框
        function closeAlert(o) {
     
     
            arrMsg09_Index--;
            $(o).parent().parent().remove();
        }
    </script>

Effect picture