Question

我可以找到使用codrops的叠加教程here。使用教程的人＆＃34;触发器覆盖＆＃34;用于触发叠加的按钮上的ID。

我尝试使用具有相同id的div（id选择器仅使用一次）来创建覆盖触发器，如上所述，没有使用id的多个实例。

我在悬停光标上给出了div：指针，我希望在单击div时打开叠加层。

html -

<div id="trigger-overlay">
     <p>Lorem Ipsum</p>
</div>
 <div class="overlay overlay-hugeinc">
            <div class="row">
                <div class="large-12 small-12 medium-12 columns">
                    <button type="button" class="overlay-close right">Close</button>
                </div>
                <div class="large-12 medium-12 small-12 columns">
                    <div class="large-2 medium-2 small-12 columns">
                        <p class="main-p">About<br>Differenxia</p>
                    </div>
                </div>
                <div class="large-12 medium-12 small-12 columns">
                    <p>
                        Content for the fullscreen overlay
                    </p>
                </div>
            </div>

        </div>

这是处理触发器的脚本 -

(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 };

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
        }
    }

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

Classie -

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

Answer 1

您是否可以发布HTML或确保您没有在HTML文档中的任何其他地方使用该ID。

否则只有ID的第一个实例才会触发事件。

IE：

<p><button id="trigger-overlay" type="button">Open Overlay</button></p>
<div id="trigger-overlay"><p>Testing</p></div>

上面的顶部按钮可以使用，而下面的测试div不会。

如果你想要多个区域来触发叠加，我建议导入JQuery并向要触发的元素添加类。这样你可以像这样实现叠加切换：

$('.triggerClass').click(function(){
    toggleOverlay();
});

onclick div触发器打开覆盖

1 个答案: