0

我一直在互联网上寻找解决方案，但没有找到任何解决方案。
在我的 jQuery Mobile 应用程序中，我有多个 HTML 文件，每个文件代表一个页面以保持工作流程的整洁，因此我使用 AJAX 进行导航。
我的页面fleet.html（导航中的第 3 个）的地图上有一个按钮，它打开一个对话框，打开过程是用javascript完成的，只有当我单击该按钮时，它才会显示一个空白对话框，其中没有文本，也没有按钮。
这是fleet.html：

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"></div>
        </div><!-- END map-container -->
    </div><!-- END content -->

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
        <div data-role="header" data-theme="b">
            <h3>Informations</h3>
        </div>
        <div data-role="content">
            <p>POI Infos</p>
        </div>
    </div>

</div><!-- END page -->

这是我打开对话框的方式： 

function onSelectFeature() {
    $("#fleetPage #deviceInfoDialog").dialog();
    $.mobile.changePage($("#fleetPage #deviceInfoDialog"), {
        transition: "slidedown"
    });
}
4

2 回答 2

1

将您的对话框 div 移到页面 div 之外。添加一个隐藏链接，单击该链接将打开对话框。重新编写脚本函数以模拟该链接被点击。

我对此进行了测试，效果很好：

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"> <a href="javascript: onSelectFeature();">onSelectFeature</a></div>
        </div><!-- END map-container -->
    </div><!-- END content -->


    <script>
        function onSelectFeature() {
            $("#lnkDeviceInfoDialog").click();
        }
    </script>

    <a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a>


</div><!-- END page -->

<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
    <div data-role="header" data-theme="b">
        <h3>Informations</h3>
    </div>
    <div data-role="content">
        <p>POI Infos</p>
    </div>
</div>
于 2013-08-08T13:19:54.720 回答
0

尝试这个

function onSelectFeature() {
    $.mobile.changePage( "#deviceInfoDialog", { role: "dialog", transition: "slidedown" } );
}

你的html应该是这样的

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"></div>
        </div><!-- END map-container -->
    </div><!-- END content -->
</div><!-- END page -->

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
        <div data-role="header" data-theme="b">
            <h3>Informations</h3>
        </div>
        <div data-role="content">
            <p>POI Infos</p>
        </div>
    </div>
于 2013-08-08T13:02:56.230 回答