叠加多个页面——就像您点击 Facebook 照片时一样

Question

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

我想给叠加 class 一个 ID 名称，例如 pagename-1（页面上的第一个 div）。然后 select 使用 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 );
    })();

最终我想要像 Facebook 上的新闻提要中的叠加层那样的东西。我必须编辑的另一件事是当覆盖屏幕可见时无法滚动。

Answer 1

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

在 HTML 文件中：

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

在 Javascript 文件中：

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

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

叠加多个页面——就像您点击 Facebook 照片时一样

Overlay multiple pages - like when you click on a Facebook photo

html

javascript

jquery

overlay