JSFiddle - React, Tailwind, and code Playground

by Jack Violet

HTML

<div id="app">
  <div class="alert-container success-color">
    <span class="success-text">成功提示的文案</span>
    <span class="close">X</span>
  </div>
  <button id="showLoading">显示加载中</button>
  <button id="showMessage">显示信息</button>
  <div class="el-message" id="message" style="display:none;">
    <p>这是一条消息</p>
  </div>
</div>

CSS

.success-color {
   background-color: #f0f9eb;
   color: #67c23a;
 }

 .info-color {
   background-color: #f4f4f5;
   color: #909399;
 }

 .warning-color {
   background-color: #fdf6ec;
   color: #e6a23c;
 }

 .error-color {
   background-color: #fef0f0;
   color: #f56c6c;
 }

 .alert-container {
   position: relative;
   padding: 8px 16px;
   border-radius: 5px;
   opacity: 1;
   align-items: center;
   overflow: hidden;
   display: flex;
 }

 .success-text {
   font-size: 13px;
   line-height: 18px;
   padding: 0 8px;
   color: #67c23a;
 }

 .close {
   font-size: 13px;
   position: absolute;
   top: 12px;
   right: 15px;
   cursor: pointer;
 }

 .loading-background {
   position: fixed;
   z-index: 2000;
   background-color: rgba(26, 26, 26, 0.9);
   margin: 0;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   transition: opacity 0.3s;
   z-index: 2000;
 }

 .loading-div {
   top: 50%;
   position: absolute;
   margin-top: -20px;
   height: 40px;
   width: 100%;
   align-items: center;
   justify-content: center;
   display: flex;
 }

 .loading-text {
   color: #f0f9eb;
   font-size: 15px;
   overflow: hidden;
   z-index: 2001;
 }

 .el-message {
   min-width: 380px;
   box-sizing: border-box;
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;
   border-color: #ebeef5;
   position: fixed;
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
   background-color: #edf2fc;
   transition: opacity 0.8s, transform 1s;
   overflow: hidden;
   padding: 15px 15px 15px 20px;
   display: flex;
   align-items: center;
 }

JavaScript

var alertContainer = document.getElementsByClassName("alert-container")[0]
        var close = document.getElementsByClassName("close")[0]
        close.onclick = function() {
          alertContainer.style = "display:none;"
        }

        var app = document.getElementById("app")
        var bg = document.createElement("div")
        bg.className = "loading-background"
        var div = document.createElement("div")
        div.className = "loading-div"
        var text = document.createElement("span")
        text.className = "loading-text"
        text.textContent = "加载中……"
        div.appendChild(text)
        bg.appendChild(div)


        document.getElementById("showLoading").onclick = function() {
          if (document.getElementsByClassName("loading-background").length > 0) {
            return;
          }
          app.appendChild(bg)
          setTimeout(() => {
            if (document.getElementsByClassName("loading-background").length > 0) {
              app.removeChild(bg)
            }
          }, 3000)
        }

        document.getElementById("showMessage").onclick = function() {
          document.getElementById("message").style = "display:block;"
          setTimeout(() => {
            document.getElementById("message").style = "display:none;"
          }, 3000)
        }