jQuery Mobile對話框空白

Question

我一直在互聯網上尋找解決方案，但沒有找到任何解決方案。
在我的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"
    });
}

Answer 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>

Answer 2

嘗試這個

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>