关闭一个覆盖Div点击

Closing an Overlay Div on Click

本文关键字:一个 覆盖 Div 点击      更新时间:2023-09-26

我有两个按钮来打开和关闭一个覆盖div。

。Trigger-overlay 用于显示菜单,.overlay-close用于多个叠加来关闭它们。

。Wrap通过添加类.wrap-open

来封装所有内容,并在覆盖打开时向右滑动。

。触发叠加被点击,但当时不被点击。单击Overlay-close 。看到的例子。(点击第二张幻灯片中的链接1或链接2)。

我需要对下面的JS代码做什么来删除。当时,Wrap-open 。是否单击了Overlay-close ?

JS小提琴:https://jsfiddle.net/cgx8zu2h/

工作的例子:

https://www.uk-cpi.com/temp-js/annual-review/

JavaScript

(function() {
  var triggerBttn = document.getElementsByClassName('trigger-overlay');
  var closeBttn = document.getElementsByClassName('overlay-close');
  var wrap = document.querySelector('div.wrap');
  transEndEventNames = {
      'WebkitTransition': 'webkitTransitionEnd',
      'MozTransition': 'transitionend',
      'OTransition': 'oTransitionEnd',
      'msTransition': 'MSTransitionEnd',
      'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
    support = {
      transitions: Modernizr.csstransitions
    };
  function toggleOverlay() {
    var overlay = document.getElementById(this.getAttribute('data-href'));
    // If overlay is open
    if (classie.has(overlay, 'zap')) {
      classie.remove(overlay, 'zap');
      classie.remove(wrap, 'wrap-open');
      classie.add(overlay, 'close');
      var onEndTransitionFn = function(ev) {
        if (support.transitions) {
          if (ev.propertyName !== 'visibility') return;
          this.removeEventListener(transEndEventName, onEndTransitionFn);
        }
        classie.remove(overlay, 'close');
      };
      if (support.transitions) {
        overlay.addEventListener(transEndEventName, onEndTransitionFn);
      } else {
        onEndTransitionFn();
      }
    }
    // If overlay isn't closed
    else if (!classie.has(overlay, 'close')) {
      classie.add(overlay, 'zap');
      classie.add(wrap, 'wrap-open');
    }
    // If overlay is closed
    else if (classie.has(overlay, 'close')) {
      classie.add(overlay, 'zap');
      classie.add(wrap, 'wrap-open');
    }
  }

  for (var i = 0; i < triggerBttn.length; i++) {
    triggerBttn[i].addEventListener('click', toggleOverlay);
  }
  //counts number of closeBttn and remove zap on click for all
  for (var i = 0; i < closeBttn.length; i++) {
    closeBttn[i].addEventListener('click', function() {
      this.parentNode.className = this.parentNode.className.replace(/(?:^|'s)zap(?!'S)/g, '');
    });
  }
})();

正如你所看到的-基本上我只是告诉#menu设置为z-index: 180 ..但我也消除了你使用的'分类',因为jquery已经有了。虽然知道纯js的方式很好,但如果你已经加载了jquery,为什么不利用它呢?https://jsfiddle.net/te0s2e86/1/

#menu{ z-index: 180; }