纯 JavaScript 实现遮罩层

既想方便的实现遮罩层，又不想去写dom ，这无疑是个最好的办法

具体代码如下：

     // 创建 div 元素
      overlay = document.createElement('div');

      // 设置遮罩层样式
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '100%';
      overlay.style.zIndex = 10000;
      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';

      // 阻止点击事件传递到下面的内容
      // overlay.style.pointerEvents = 'none';
      var loader = document.createElement('div');
      loader.style.position = 'absolute';
      loader.style.top = '50%';
      loader.style.left = '50%';
      loader.style.transform = 'translate(-50%, -50%)';
      loader.style.width = '100px';
      loader.style.height = '100px';
      loader.style.backgroundColor = 'transparent'; // 加载特效背景色
      loader.style.borderRadius = '50%';
      loader.style.border = '3px solid #ccc'; // 加载特效边框样式
      loader.style.borderTopColor = '#03A9F4'; // 加载特效颜色
      loader.style.animation = 'spin 1s linear infinite'; // 加载特效动画

      overlay.appendChild(loader);
      // 将遮罩层添加到页面中
      document.body.appendChild(overlay);
      overlay.addEventListener('click', function(event) {
        event.stopPropagation(); // 阻止点击事件冒泡
      });

这时候往往又想来个关闭他的方法，这代码肯定也有

// 从页面中移除遮罩层
   overlay.parentNode.removeChild(overlay);

这俩个东西配合起来，就可以实现遮罩层了，且只用封装到方法里面调用即可