点击关闭覆盖区域

我有两个打开和关闭覆盖区域的按钮。点击关闭覆盖区域

。触发器覆盖它用于显示菜单和.overlay-close，它与多个覆盖使用关闭它们。

.wrap包装所有的内容和幻灯片通过添加覆盖打开权当类.wrap开

这工作.trigger叠加被点击，但不是在.overlay关闭点击了。 See example。（点击第二张幻灯片中的链接1或链接2）。

什么我需要做下面的JS代码去除.wrap开被点击.overlay关闭时？

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, ''); 
    }); 
    } 
})();

来源

2016-11-14 Dan Lee

u能告诉我们你对的jsfiddleķ –

您需要添加HTML标记，则请代码。 – Rounin

JS Fiddle现在加入：https：//jsfiddle.net/cgx8zu2h/ –

正如你所看到的 - 基本上我只是告诉#menu在z-index：180 ..但我也消除了'classie'的使用，因为jquery已经有了。虽然这很好，但你知道纯JS方法来完成任务，如果你已经加载jQuery为什么不利用它？ https://jsfiddle.net/te0s2e86/1/

#menu{ z-index: 180; }

来源

2016-11-14 14:04:00 flowtron

谢谢，你已经做得更好了高效。几乎在那里。 1.wrap-open应该添加到.wrap当点击链接（但不是当主菜单按钮被点击时） 2.点击主菜单按钮第一次工作，但你会注意到当你保持重复点击菜单按钮，它将显示菜单文本，它倾斜的预动画状态。 –

Mmh。你的jsfiddle没有那整个包装打开的东西在里面......我很快就入侵了它 - 但是这导致了一系列新问题。我插入了一个快速检查，看看我们是否在菜单链接上调用了这个功能..但是，现在一旦您在幻灯片视图中关闭菜单，就会导致导航链接显示出来......一些反思/在这里需要重组/重新编码！： -/https://jsfiddle.net/te0s2e86/3/ – flowtron

现在运作良好。让菜单显示在其他覆盖层的顶部是很好的，因为它可以让用户保持控制。我的最后一个问题是让菜单导航项关闭所有覆盖。有任何想法吗？ –

点击关闭覆盖区域

回答

相关问题