[英]Multiple “close” buttons on modal
I am using the modals found here on Codrops . 我正在使用Codrops上的模态。
These modals have one close button (also closes when you click outside the modal), but I want to add more. 这些模态有一个关闭按钮(当您在模态外部单击时也会关闭),但是我想添加更多。 The JavaScript is below: 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();
})();
I thought by just simply swapping: 我认为只需交换一下即可:
close = modal.querySelector( '.md-close' );
With this: 有了这个:
close = modal.querySelectorAll( '.md-close' );
would do the trick -- and every element with the md-close class would close the modal. 可以解决问题-带有md-close类的每个元素都将关闭模式。 I was wrong (I'm new to JavaScript if you couldn't tell). 我错了(如果您不知道,我是JavaScript新手)。
Thanks in advance for any help with this! 在此先感谢您的任何帮助!
Updated Code: 更新的代码:
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();
})();
The problem is likely that addEventListener
only works on a single element at a time and close
is a collection of elements. 问题可能是addEventListener
只能在单个元素上起作用,而close
是元素的集合。 You're probably better off adding an event listener to the modal itself and checking for the md-close
class: 您最好将事件侦听器添加到模式本身并检查md-close
类:
modal.addEventListener('click', function (ev) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
Then you can ditch your close = ...
variable as well. 然后,您也可以放弃close = ...
变量。
Change 更改
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
Into 进入
document.addEventListener( 'click', function( ev ) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
And it will works! 它将起作用!
NOW... I thought applying this hack solved also my problem as I wanted to add .md-close on my .md-trigger link to close a modal and open a new one but it didn't work! 现在...我想应用此技巧也解决了我的问题,因为我想在.md-trigger链接上添加.md-close来关闭模式并打开一个新模式,但是它不起作用! Someone could help me on this? 有人可以帮我吗?
How to display a new modal window hiding the previous one? 如何显示一个隐藏先前窗口的新模式窗口?
Thanks! 谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.