JSFiddle - React, Tailwind, and code Playground

by phpor

HTML

<h2>遮罩的实现</h2>

<div id='loading-mask'></div>
<button id='showmask'>弹出遮罩</button>
<button onclick='alert("点着我了");'>点我试试</button>
<div id="loading">
    <div class="loading-indicator"> <span id="loading-msg">Loading ...</span>

        <button id="ok">OK</button>
    </div>
</div>

CSS

#loading-mask {
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      z-index:20000;
      background-color:gray;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      opacity:0.5;
  }
  #loading {
      position:absolute;
      left:45%;
      top:40%;
      padding:2px;
      z-index:20001;
      height:auto;
  }
  #loading .loading-indicator {
      background:white;
      color:#444;
      font:bold 20px tahoma, arial, helvetica;
      padding:10px;
      margin:0;
      height:auto;
  }
  #loading-msg {
      font: normal 18px arial, tahoma, sans-serif;
  }

JavaScript

$(function () {
    $("#ok").click(function () {
        $("#loading-mask").css('display', 'none');
        $("#loading").css('display', 'none');
    });
    $("#showmask").click(function () {
        $("#loading-mask").css('display', 'block');
        $("#loading").css('display', 'block');
    });
});