Question

也许是一个简单的问题，但我对javascript的了解仍然很小。我有一个4页的网站。在每个页面上，我想创建一个div可点击，打开一个叠加屏幕。但是每个覆盖屏幕都有不同的文本，因为de overlay屏幕中的内容（文本和图像）是clicable div中文本的扩展。现在我可以让每个div都可点击，但我不知道如何打开正确的叠加屏幕。

我正在考虑给overlay类赋一个ID名称，比如pagename-1（页面上的第一个div）。然后用document.getElementById（）或其他东西选择ID并将其添加到javascript中。但我不知道该怎么做，因为我的id包含一个页面名+一个数字（概述）...

的jsfiddle： http://jsfiddle.net/52osrbcu/

HTML

<div class="trigger-overlay">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/4.jpg" width="100" height="100" alt="" />
</div>                                  

<div class="trigger-overlay">           
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/5.jpg" width="100" height="100" alt="" />
</div>


     <div class="overlay overlay-slidedown" id="pagename-1">
            <button type="button" class="overlay-close">Close</button>
      <p>
      text1
      </p>
        </div>

     <div class="overlay overlay-slidedown" id="pagename-2">
            <button type="button" class="overlay-close">Close</button>
      <p>
      text2
      </p>
        </div>


        <script src="http://tympanus.net/Development/FullscreenOverlayStyles/js/classie.js"></script>

CSS

/* Overlay style */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(7,6,10,0.9);
    z-index: 1000;
}

/* Overlay closing cross */
.overlay .overlay-close {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 20px;
    top: 0;
    overflow: hidden;
    border: none;
    background: url(http://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png) no-repeat center center;
    text-indent: 200%;
    color: transparent;
    outline: none;
    z-index: 100;
    cursor: pointer;
}

/* Effects */
.overlay-slidedown {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
    transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}

p {
  color: white;
}

的Javascript

  (function() {
        var triggerBttn = document.getElementsByClassName( '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' );
            }
        }
        for (x=0;x<triggerBttn.length;x++) {
            triggerBttn[x].addEventListener( 'click', toggleOverlay );
        }
        closeBttn.addEventListener( 'click', toggleOverlay );
    })();

最终我想在新闻Feed中使用Facebook上的叠加层。我必须编辑的另一件事是当覆盖屏幕可见时无法滚动。

Answer 1

首先，我建议使用jQuery，因为它会使你的代码更清晰，但如果你想坚持使用纯Javascript，那么我会使用属性，因为你的问题比id更具语义意义。这是更新的小提琴：http://jsfiddle.net/52osrbcu/1/。这是修改后的代码：

在HTML文件中：

<div class="trigger-overlay" pagename="1">

在Javascript文件中：

function toggleOverlay() {
      console.log(this.getAttribute("pagename"));

我刚刚将pagename属性打印到控制台，但您可以在if语句中使用它来选择要显示的正确文本。

覆盖多个页面 - 例如当您点击Facebook照片时

1 个答案: