zoukankan      html  css  js  c++  java
  • 绑定弹窗事件最好的方法,原生JS和JQuery方法

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

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

  • 相关阅读:
    今日SGU 5.27
    今日SGU 5.26
    今日SGU 5.25
    软件工程总结作业
    个人作业——软件产品案例分析
    个人技术博客(α)
    结对作业二
    软工实践 二
    软工实践 一
    《面向对象程序设计》六 GUI
  • 原文地址:https://www.cnblogs.com/huangxiaowen/p/4261845.html
Copyright © 2011-2022 走看看