jquery - 查询/CSS : no success in to reveal a footer hidden behind a front-page

Question

我试图显示隐藏在首页后面的底部固定页脚(z-index:1)(z-index:999，其中应包含图片)在单击链接时运行脚本...

在现实生活中，使用触控板运行良好，并且用 2 个手指将图片移到顶部... 对于没有触控板的用户，我需要插入一个链接按钮来帮助显示页脚。

这是jsfiddle

    HTML -------
    <div class="container">
        <div class="front_page">
            <div class="text1">
                <p>Front-page .........</p>
            </div>
            <div class="text2">
               <a id="reveal" href="#">REVEAL FOOTER</a>
            </div>
        </div>
        <div class="footer" data-pages="reveal-footer">
           footer .........
         </div>
    </div>

    CSS --------
    .container { 
        width:100%; 
        position:relative; 
    }
    .front_page { 
        width:100%; 
        background: yellow; 
        position:absolute; 
        z-index:1000; 
    }
    .text1 {
        height: 200px;
    }
    .text2 {
        height: 400px;
        text-align: center;
        font-size: 32px;
    }

    .footer { 
        width:100%; 
        height:100px; 
        background: blue;
        color: white;
        position: fixed;
        bottom: 0;
        z-index: 1;
    }

   --SCRIPT 
    var myEl = document.getElementById('reveal');

    myEl.addEventListener('click', function() {
        var _elem = $('[data-pages="reveal-footer"]');
        setHeight();
            function setHeight(){
                var h = _elem.outerHeight();
                alert('_elem.outerHeight: ' + h);
                alert(JSON.stringify( _elem.prev()));
                _elem.prev().css({ 'margin-bottom':h })
            }
        $(window).resize(function(){
          setHeight();
        })  
        //alert('reveal the footer elemen _elem !' + _elem);
    }, false);

Answer 1

你只需要添加这一行:

$('.footer').css('z-index', 1001);

http://jsfiddle.net/tmzbsd0g/11