关闭一个覆盖Div点击
Closing an Overlay Div on Click
我有两个按钮来打开和关闭一个覆盖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; }
相关文章:
- 将添加一个相同类型的事件附加或覆盖以前添加的具有相同名称的事件
- javascript函数将数据添加到屏幕,但随后被另一个函数覆盖
- 将一个iframe覆盖在另一个ifame上
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- 无限多维数组,其中一个值被覆盖
- 加载CSS文件并覆盖上一个文件
- 多个背景图像,一个覆盖另一个
- 如何在谷歌地图中制作一个覆盖世界的多边形
- JavaScript设计模式,一个函数正在被覆盖
- 预加载器."$.加载覆盖不是一个函数”
- 我的数组中的每个元素都被最后一个元素推入覆盖
- 用另一个 ng 点击覆盖点击(例如 ng 点击)
- 导入 serval WebComponent 时,上一个自定义元素被下一个元素覆盖
- Javascript 保存相同的 ID,而不会在 LocalStorage 中覆盖另一个 ID
- Javascript 循环和数组通过给定的最后一个值覆盖元素
- 悬停时仅显示一个覆盖
- 关闭一个覆盖Div点击
- 在Phaser框架中给予精灵一个覆盖
- 显示一个覆盖iframe的内容从动态url
- 传单:地图点击事件不工作时,点击一个覆盖的geojson层