Question

我将索引文件作为对话框供用户输入用户名和密码。页面在data-role="page时工作正常，但对话框显示并快速消失。它基本上闪现在屏幕上，我不明白为什么。我的代码如下：

HTML

<body onload="init()">

<div id="home">

    <div id="launcherPage" data-role="page">
        <!-- I'm just here waiting for deviceReady -->
    </div>


    <div data-role="dialog" id="loginPage">

        <div data-role="header">
          <h1>CHUNE</h1>
        </div>

        <div data-role="content">    

            <form id="loginForm">
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" value="" placeholder="Username" />
            </div>

            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" placeholder="Password" />
            </div>

            <input type="submit" value="Login" id="submitButton">
            </form>
            <div style="text-align: center;">Or</div> <!--need to center-->
            <a href="./register.html" data-role="button">Register</a>

        </div>

        <div data-role="footer">
            <h4>&copy; KewsPlus</h4>
        </div>

    </div>

的jQuery

function deviceReady() {
console.log("deviceReady");
$("#loginPage").on("pageinit",function() {
    console.log("pageinit run");
    $("#loginForm").on("submit",handleLogin);
    checkPreAuth();
});
$.mobile.changePage("#loginPage");

Answer 1

要在加载时以编程方式打开对话框，您需要设置超时以确保在打开页面之前将页面完全加载到DOM中。

$(document).on('pageshow', '#myPage' ,function () {
 setTimeout(function () {
  $.mobile.changePage('#dialog');
 }, 100); // delay above zero
});

<强> Similar issue

出现jQuery Mobile对话框，然后在Phonegap中消失

1 个答案: