: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：

  (function() {
      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;
      };
      
      if (typeof window.screenX === "number") {
          img.addEventListener("click", function() {
              if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
                  runPrefixMethod(document, "CancelFullScreen");
              } else {
                  runPrefixMethod(this, "RequestFullScreen")            
              }
          });
      }
  })();