我正在使用找到的模态here on Codrops。
这些模态有一个关闭按钮(当您在模态外单击时也会关闭),但我想添加更多。 JavaScript如下:
var ModalEffects = (function() {
function init() {
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );
if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}
function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}
el.addEventListener( 'click', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
} );
}
init();
})();
我只想简单地交换:
close = modal.querySelector( '.md-close' );
有了这个:
close = modal.querySelectorAll( '.md-close' );
会做到这一点 - 并且每个带有 md-close 类的元素都会关闭模态。我错了(如果你不知道的话,我是JavaScript新手。)
提前感谢您对此的任何帮助!
更新代码:
var ModalEffects = (function() {
function init() {
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) );
function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );
if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}
function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}
el.addEventListener( 'click', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
modal.addEventListener( 'click', function( ev ) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
} );
}
init();
})();
答案 0 :(得分:0)
问题可能是addEventListener
一次只对单个元素起作用,而close
是元素的集合。你可能最好在模态本身添加一个事件监听器并检查md-close
类:
modal.addEventListener('click', function (ev) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
然后你也可以抛弃你的close = ...
变量。
答案 1 :(得分:0)
更改
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
向
document.addEventListener( 'click', function( ev ) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
它会起作用!
现在......我认为应用这个黑客也解决了我的问题,因为我想在我的.md-trigger链接上添加.md-close来关闭一个模态并打开一个新模式但它不起作用!有人可以帮我这个吗?
How to display a new modal window hiding the previous one?
谢谢!