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

浏览数：45 / 时间：2015年06月09日

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

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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 log 使用 方法 la for sp class style 代码 log 使用 方法 la for sp

相关文章

随机文章

您可能还喜欢

您可能还喜欢