全局消息提示 onMessage

<style>
    #onMessage {
        z-index: 10;
        position: absolute;
        top: -40px;
        left: 40%;
        background-color: #fff;
        color: #26272f;
        line-height: 30px;
        padding: 0 30px;
        border-radius: 15px;
        box-shadow: 2px 2px 10px #899;
        border-left: 2px solid #0d0;

        animation-name: onMessage;
        animation-duration: 2.5s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-play-state: running;
    }
    @keyframes onMessage{0%{top:-40px}6%,90%{top:30px}to{top:-40px}}
</style>
<div id="onMessage">操作成功</div>

<script>
  // 全局消息提示函数
  function onMessage(id, msg) {
    document.getElementById(id).innerHTML = `
      <style>
          .onMessage{
          z-index:100;position:absolute;top:-40px;left:40%;background-color:#fff;color:#26272f;line-height:30px;padding:0 30px;border-radius:15px;box-shadow:2px 2px 10px #899;border-left:2px solid #0d0;
          animation-name:onMessage;animation-duration:2.5s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:1;animation-direction:normal;animation-play-state:running}
          @keyframes onMessage{0%{top:-40px}6%,90%{top:30px}to{top:-40px}}
      </style>
      <div class="onMessage">`+ msg + `</div>`;
  };
</script>

转载于:https://my.oschina.net/upcyan/blog/907659