使用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';
        }
      }

有错误或者更好的方法欢迎评论

 

posted on 2015-01-30 11:14  小海豚Dolphins  阅读(520)  评论(0编辑  收藏  举报