0

我正在尝试制作一个非常基本的列表视图弹出窗口。我只是看不到让它工作。这是我到目前为止的代码

        <div data-role="page">
        <div data-role="content">
            <div id="map"></div>
            <a href="#filter" class="map_buttons" id="map_filter_button" data-rel="dialog">Filter</a>
            <a href="#menu" class="map_buttons" id="map_manu_button" data-rel="dialog">Menu</a>
            <a href="#report_popupMenu" class="map_buttons" id="map_report_button" data-rel="popup" data-inline="true" data-transition="slideup">Report</a>
        </div>
    </div>

<div id="report_popupMenu" data-role="popup">
    <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
        <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li data-theme=\"b\">Choose Category.</li>
    </ul>
</div>

<div id="report_popupMenu" data-role="popup">
    <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
        <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li data-theme=\"b\">Choose Category.</li>
    </ul>
</div>

我使用以下 CDN

我希望弹出窗口位于屏幕的中心。我所做的一直在关注这个网站http://view.jquerymobile.com/1.3.0/docs/widgets/popup/#&ui-state=dialog但它只是不起作用。任何帮助将不胜感激。

这是用于加载的代码

  • s 来自配置文件

    $(document).ready(function() {

var map = null;
init();
popuateCat();
function init() {
    var mapProp = {
        center : new google.maps.LatLng(51.508742, -0.120850),
        zoom : 5,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI : true,
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);

}

function popuateCat() {

    $.ajax({
        url : "configs/reportCatagories.config",
        dataType : "xml",
        success : function(data) {
        $("#report_categories").append("<li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>");
            $(data).find("Category").each(function() {
                var dataString = $(this).text();
                var cat = '<li><a href=\"#newReport\" id=\"' + dataString + '\">' + dataString + '</a></li>';
                $("#report_categories").append(cat);
            });
        }
    });

}

    });

    • 4

    2 回答 2

    3

    工作示例：http: //jsfiddle.net/Gajotres/QGhYN/

    属性data-position-to="window"被添加到弹出 div。它将居中弹出。

    <div data-role="page" id="index">
    <div data-theme="b" data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a href="#report_popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
        <div id="report_popupMenu" data-role="popup" data-position-to="window">
            <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
                <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
                <li  data-theme=\"b\">Choose Category.</li>
                <li  data-theme=\"b\">Choose Category.</li>
                <li data-theme=\"b\">Choose Category.</li>
            </ul>
        </div>
    </div>
</div>
    于 2013-05-16T13:56:44.897 回答
    0

    According to the docs, you have to place the popup div's inside the page div. Like this:

    <div data-role="page">
  <div data-role="popup">
  </div>
</div>

    I believe yours aren't inside the page div, check your closing div tags.

    于 2013-05-16T13:58:19.920 回答