码迷,mamicode.com
首页 > Web开发 > 详细

绑定弹窗事件最好的方法,原生JS和JQuery方法

时间:2015-01-30 14:56:54      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

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

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

 

绑定弹窗事件最好的方法,原生JS和JQuery方法

标签:

原文地址:http://www.cnblogs.com/huangxiaowen/p/4261845.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!