javascript - jQuery 手机 : How To Put Listview Popup on Top of Page Content?

Question

我正在使用 jQuery Mobile 为移动应用程序创建一个简单的 UI。 This is my code (jsfiddle) .

HTML:

<div class="container">
    <!-- start -->
    <div data-role="page">
        <div data-role="header" data-theme="c">

             <h1>Infographic</h1>

        </div>
        <!-- end data role header -->
        <div data-role="content" role="main" style="overflow-x: hidden;">
            <div class="infografik-image">
                <img src="http://placehold.it/440x699" />
            </div>
            <!-- end infografik-image -->
        </div>
        <!-- end content -->
        <!-- start footer -->
        <ul data-role="listview" data-theme="c" style="display:none;" id="pop">
            <li><a href="faq.html" rel="external">FAQ</a>
            </li>
            <li><a href="aduan.html" rel="external">Report</a>
            </li>
            <li><a href="infographic.html" rel="external">Infographic</a>
            </li>
        </ul>
        <div data-role="footer" data-position="fixed" data-theme="d">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" rel="external" class="ui-btn-active">Home</a>
                    </li>
                    <li><a href="news.html" rel="external">News</a>
                    </li>
                    <li><a href="contact.html" rel="external">Contact</a>
                    </li>
                    <li><a href="javascript:toggle();" rel="external" id="displayText">More</a>
                    </li>
                </ul>
            </div>
            <!-- /navbar -->
        </div>
        <!-- /footer -->
    </div>
    <!-- end page -->
</div>
<!-- end container -->

CSS:

body {
    margin: 0;
    padding: 0;
}
ul#pop {
    display:none;
}
.infografik-image {
    width: 95%;
    margin: 0 auto;
}
.infografik-image img {
    width: 100%;
    height: auto!important;
    vertical-align: bottom;
}

JS:

function toggle() {
    var ele = document.getElementById("pop");
    var text = document.getElementById("displayText");
    if (ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "More";
    } else {
        ele.style.display = "block";
        ele.style.width = "50%";
        ele.style.float = "right";
        ele.style.marginRight = "3%";
        ele.style.paddingTop = "25px";
        ele.style.paddingBottom = "25px";
        text.innerHTML = "Close";
    }
}

我创建了一个小弹出窗口。当用户点击“更多”选项卡时，将显示我的弹出窗口。我使用 javascript 创建它(我是 JS 和 jQuery 菜鸟)。

我真正想要这个弹出窗口做的是，将它显示在页面内容的顶部。在这种情况下，我希望它显示在信息图表图像的顶部。

如果您有其他易于理解的建议/资源/教程，请与我分享。我想学。

Answer 1

如果您想使用 jQuery Mobile Popup 小部件:

$(document).on("click", "#btnToggle", function(){

    $(this).find(".ui-btn-text").text("Close");
    var bottomPos = $(document).height() - $.mobile.getScreenHeight() + 62 - $(document).scrollTop();  

    $("body").css("overflow", "hidden");
    $("#popupMenu")
        .popup( "open", {})
        .on( "popupafterclose", function( event, ui ) {
            $("#btnToggle .ui-btn-text").text("More");
            $("body").css("overflow", "auto");
        })
        .parents(".ui-popup-container")
        .css({
            "right": "4px",
            "left" : "auto",
            "bottom": bottomPos + "px",
            "top": "auto"
        });

});

代码首先通过在具有 ui-btn-text 类的按钮内找到适当的 SPAN，将按钮文本更改为 Close。
- 然后计算弹出窗口的位置，同时考虑到主体的滚动位置。
- 接下来，在弹出窗口处于事件状态时关闭 body 上的滚动 - 其余的重置文本并在弹出窗口关闭时滚动并将弹出窗口定位在按钮上方。

Here is the updated FIDDLE