::backdrop伪元素与蒙层的样式控制实例页面

展示

代码

• HTML：

  <h4 class="fill">弹框蒙层</h4>
  <dialog id="dialog">相比浏览器默认的蒙层，我要更深一点~</dialog>
  <p><button onclick="dialog.showModal();">显示弹框</button></p>
  
  <h4 class="fill">元素全屏</h4>
  <p>点击图片：</p>
  <img id="img" src="1.jpg" width="256">
  
  <h4 class="fill">视频全屏</h4>
  <p>点击全屏按钮：</p>
  <video id="video" width="256" height="448" controls>
      <source src="sing-song.mp4" type="video/mp4">
  </video>

• CSS：

  dialog::backdrop {
      background: #000a;
  }
  video::backdrop {
      background: #000a;
  }
  img::backdrop {
      background: #000a;
  }

• JS：

  img.onclick = function () {
      if (!document.fullscreenElement) {
          this.requestFullscreen();
      } else {
          document.exitFullscreen();
      }
  };