自定义消息框,弹出后三秒后自动消失,消息框css水平垂直居中,自适应视窗尺寸

9 篇文章 0 订阅
<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>

效果图
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王焜棟琦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值