全屏叠加效果鼓膜多个按钮

Question

您好我想修改本教程中关于鼓室http://tympanus.net/Development/FullscreenOverlayStyles/index12.html的代码。如果可能的话，我想制作多个按钮来打开叠加层。原始代码看起来像这样

    (function() {
    var triggerBttn = document.getElementById( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };
        s = Snap( overlay.querySelector( 'svg' ) ), 
        path = s.select( 'path' ),
        steps = overlay.getAttribute( 'data-steps' ).split(';'),
        stepsTotal = steps.length;

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            var pos = stepsTotal-1;
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );

            var onEndTransitionFn = function( ev ) {
                    classie.remove( overlay, 'close' );
                },
                nextStep = function( pos ) {
                    pos--;
                    if( pos < 0 ) return;
                    path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { 
                        if( pos === 0 ) {
                            onEndTransitionFn();
                        }
                        nextStep(pos);
                    } );
                };

            nextStep(pos);
        }
        else if( !classie.has( overlay, 'close' ) ) {
            var pos = 0;
            classie.add( overlay, 'open' );

            var nextStep = function( pos ) {
                pos++;
                if( pos > stepsTotal - 1 ) return;
                path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } );
            };

            nextStep(pos);
        }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

我正在尝试使用每个功能，所以我补充说：

var triggerBttn;
$(".trigger-overlay").each(function () {

    triggerBttn = $(this).attr('id');

    (function() {
    var 
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };
        s = Snap( overlay.querySelector( 'svg' ) ), 
        path = s.select( 'path' ),
        steps = overlay.getAttribute( 'data-steps' ).split(';'),
        stepsTotal = steps.length;

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            var pos = stepsTotal-1;
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );

            var onEndTransitionFn = function( ev ) {
                    classie.remove( overlay, 'close' );
                },
                nextStep = function( pos ) {
                    pos--;
                    if( pos < 0 ) return;
                    path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { 
                        if( pos === 0 ) {
                            onEndTransitionFn();
                        }
                        nextStep(pos);
                    } );
                };

            nextStep(pos);
        }
        else if( !classie.has( overlay, 'close' ) ) {
            var pos = 0;
            classie.add( overlay, 'open' );

            var nextStep = function( pos ) {
                pos++;
                if( pos > stepsTotal - 1 ) return;
                path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } );
            };

            nextStep(pos);
        }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();
});

但由于某种原因，它说

  

未捕获的TypeError：无法读取未定义的属性“addEventListener”

Answer 1

我使用了多个按钮。代码如下：

(function() {

  var container = jQuery('.container'),
    triggerBttn = jQuery('a.trigger-overlay'),
    overlay = jQuery('.overlay'),
    closeBttn = jQuery('a.overlay-close');

  transEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
  },
  transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
  support = {transitions:Modernizr.csstransitions};

  function toggleOverlay(type){
    var overlay = jQuery('.overlay.'+type);
    if(overlay.hasClass('open')){
      overlay.removeClass('open');
      container.removeClass('overlay-open');
      overlay.addClass('close');
      var onEndTransitionFn = function(ev){
        if(support.transitions){
          if(ev.propertyName !== 'visibility') return;
          this.removeEventListener(transEndEventName,onEndTransitionFn);
        }
        overlay.removeClass('close');
      };
      if(support.transitions){
        jQuery(overlay).on(transEndEventName,onEndTransitionFn);
      } else {
        onEndTransitionFn();
      }
    } else {
        overlay.addClass('open');
        container.addClass('overlay-open');
    }
  }
  triggerBttn.click(function(e){
    e.preventDefault();
    var gettype = jQuery(this).attr('href').substr(1);
    toggleOverlay(gettype);
  });
  closeBttn.click(function(e){
    e.preventDefault();
    var gettype = jQuery(this).attr('href').substr(1);
    toggleOverlay(gettype);
  });

})();

和html：

<div class="container">
  <div class="col3 nomargin">
    <h3><a href="#themes" class="trigger-overlay icon">Themes</a></h3>
  </div>
  <div class="col3 nomargin">
    <h3><a href="#subject" class="trigger-overlay icon">Subject</a></h3>
  </div>
  <div class="col3 nomargin">
    <h3><a href="#year" class="trigger-overlay icon">Year</a></h3>
  </div>
  <div class="col3 nomargin">
    <h3><a href="#code" class="trigger-overlay icon">Code</a></h3>
  </div>
</div>

<div class="overlay overlay-contentscale themes">
  <a href="#themes" class="overlay-close">Close</a>
  <nav>
    <ul>
      <li><a href="#">themes</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
<div class="overlay overlay-contentscale subject">
  <a href="#subject" class="overlay-close">Close</a>
  <nav>
    <ul>
      <li><a href="#">subject</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
<div class="overlay overlay-contentscale year">
  <a href="#year" class="overlay-close">Close</a>
  <nav>
    <ul>
      <li><a href="#">year</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
<div class="overlay overlay-contentscale code">
  <a href="#code" class="overlay-close">Close</a>
  <nav>
    <ul>
      <li><a href="#">code</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>