使用jQuery
ui = { $close: $('.close') , $pop: $('.pop') , $topopBtn: $('.topop-btn') , $popbtnArea: $('.popbtn-area') }; // 绑定打开弹窗 ui.$popbtnArea.on('click','.topop-btn',function(){ ui.$pop.eq($(this).index()).show(); }) // 关闭弹窗 ui.$close.on('click',function(){ ui.$pop.hide(); });
原生JS代码
ui.$pop = document.getElementsByClassName('pop'); ui.$topopBtn = document.getElementsByClassName('topop-btn'); ui.$close = document.querySelectorAll('.close'); for(var i=0;i<ui.$topopBtn.length;i++){ ui.$topopBtn[i].index = i; } // 打开弹窗 for(var i=0;i<ui.$topopBtn.length;i++){ ui.$topopBtn[i].onclick = function(){ ui.$pop[this.index].style.display = 'block'; } } // close关闭弹窗 for(var i=0;i<ui.$close.length;i++){ ui.$close[i].onclick = function(){ this.parentNode.style.display = 'none'; } }
有错误或者更好的方法欢迎评论