css 打开featherlight框时使背景变暗

Posted 2021-05-13

(function($) {
  $(document).ready(function() {

    // Add featherlight dimmer
    $.featherlight.defaults.beforeOpen = function(e) {
      var dimmerId = `${$.featherlight.defaults.namespace}-dimmer`;
      $($.featherlight.defaults.root).append(`<div id="${dimmerId}"></div>`);
      $(`#${dimmerId}`).fadeIn($.featherlight.defaults.openSpeed);
    };

    // Remove featherlight dimmer
    $.featherlight.defaults.beforeClose = function(e) {
      var dimmerId = `${$.featherlight.defaults.namespace}-dimmer`;
      $(`#${dimmerId}`).fadeOut($.featherlight.defaults.closeSpeed, function() { this.remove(); });
    };

  });
})(jQuery);

#featherlight-dimmer {
  background-color: rgba(0, 0, 0, .7);
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}