:fullscreen伪类控制全屏背景半透明实例页面

展示

代码

• HTML：

  <h4>点击查看大图</h4>
  <div id="img" class="cs-img-x">
      <img class="cs-img" src="/images/common/l/1.jpg">
  </div>

• CSS：

  :fullscreen .cs-img {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
  }

• JS：

  var runPrefixMethod = function(element, method) {
      var usablePrefixMethod;
      ["webkit", "moz", "ms", ""].forEach(function(prefix) {
          if (usablePrefixMethod) return;
          if (prefix === "") {
              // 无前缀，方法首字母小写
              method = method.slice(0,1).toLowerCase() + method.slice(1);
          }
  
          var typePrefixMethod = typeof element[prefix + method];
  
          if (typePrefixMethod + "" !== "undefined") {
              if (typePrefixMethod === "function") {
                  usablePrefixMethod = element[prefix + method]();
              } else {
                  usablePrefixMethod = element[prefix + method];
              }
          }
      });
  
      return usablePrefixMethod;
  };
  
  img.addEventListener("click", function() {
      if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
          runPrefixMethod(document, "CancelFullScreen");
      } else {
          runPrefixMethod(this, "RequestFullScreen")
      }
  });