jQuery Mobile: как разместить всплывающее окно списка поверх содержимого страницы?

Я создаю простой пользовательский интерфейс для мобильного приложения, используя мобильный jQuery. Это мой код (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).

На самом деле я хочу, чтобы это всплывающее окно отображало его поверх содержимого страницы. В этом случае я хочу, чтобы он отображался в верхней части инфографического изображения.

Если у вас есть другое предложение/ресурсы/учебник, которому легко следовать, поделитесь им со мной. Я хочу научиться этому.

введите здесь описание изображения


javascript jquery jquery-mobile jquery-mobile-popup jquery-mobile-listview
person Zulhilmi Zainudin    schedule 26.03.2014    source источник
comment
Почему бы не использовать всплывающий виджет: demos.jquerymobile.com/1.4.2/popup   -  person ezanker    schedule 26.03.2014
comment
проверьте этот jsfiddle.net/BTjct/3 и сообщите, есть ли исправления.   -  person Aravin    schedule 26.03.2014
comment
@Аравинт выглядит нормально. Но как заставить его плавать внизу вот так (i.imgur.com/I1D03Iq.jpg)?   -  person Zulhilmi Zainudin    schedule 26.03.2014

Ответы (2)


arrow_upward
2
arrow_downward

Если вы хотите использовать виджет 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"
        });

});

Код сначала меняет текст кнопки на Close, находя соответствующий SPAN внутри кнопки с классом ui-btn-text.
— Затем он вычисляет, куда должно перейти всплывающее окно, принимая во внимание положение прокрутки тела.< br> - Затем отключите прокрутку тела, пока всплывающее окно активно - остальные сбрасывают текст и прокручивают всплывающее окно, закрывая его, и размещают всплывающее окно прямо над кнопкой.

Вот обновленный FIDDLE

person ezanker    schedule 26.03.2014
comment
Спасибо @ezanker. Я тестирую его на своем телефоне Android, и он выглядит нормально. Но когда я тестирую его на своем iphone, я получаю следующее: i.imgur.com/otvj0ZO.jpg Вот структура моего кода: jsfiddle.net/t8h7X Что-то не так с моим кодом? Или JS не может хорошо работать на iPhone? - person Zulhilmi Zainudin; 27.03.2014
comment
Я посетил вашу скрипку на своем iPhone и не вижу проблемы. Всплывающее окно открывается внизу, как и ожидалось... - person ezanker; 27.03.2014
comment
возможно, мой предыдущий код несовместим с моим пользовательским CSS. Хорошо, теперь я создаю новый чистый HTML-файл и использую чистый jQuery CSS. Это мой снимок экрана: i.imgur.com/oSODCMO.jpg Вы получаете то же самое, что и мой? Можешь поделиться скриншотом? - person Zulhilmi Zainudin; 27.03.2014
comment
нет, когда я посещаю вашу скрипку, я получаю ожидаемые результаты. Айфон 4с iOS 7.1. - person ezanker; 27.03.2014
comment
У вас есть метатег vieport в заголовке HTML: ‹meta name='viewport' content='initial-scale=1.0, width=device-width' /› - person ezanker; 27.03.2014

arrow_upward
1
arrow_downward

Измените код java-скрипта, как показано ниже.

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";
    text.innerHTML = "Close";

    $("#pop").css({top: 50,left:280, position:'absolute'});
}
}

Обратитесь к этой ДЕМО-ВЕРСИИ FIDDLE

person Aravin    schedule 26.03.2014
comment
выглядит нормально. Но как заставить его плавать внизу вот так (i.imgur.com/I1D03Iq.jpg)? - person Zulhilmi Zainudin; 26.03.2014
comment
если вы хотите поп, как на изображении, вам нужно найти высоту изображения (это ваше замещающее изображение) и установить в соответствии с этим. - person Aravin; 26.03.2014