來自javascript的jQuery Mobile彈出消息

Question

我正在注冊並登錄到jquery移動項目，並希望它顯示彈出錯誤消息。 我一直在這里搜尋，但是似乎什么也無法工作。 我在這里嘗試使用另一個問題，因此使用了lnkDialog位，但這不起作用。 我想用彈出消息框替換所有警報。 我目前有

<div data-role="page" data-theme="b">
    <div data-role="header">
        <a href="index.html" data-rel="back" class="ui-btn-left ui-btn  ui-btn-icon-notext ui-corner-all ui-icon-back">Back</a>
        <h1>Workout Planner</h1>
    </div
    <div role="main" class="ui-content">
       <h3>Register</h3>
        <label for="txt-uName">User Name:</label>
        <input type="text" name="uName" id="uName" value="">
        <label for="txt-password">Password</label>
        <input type="password" name="pWord" id="pWord" value="">
        <a data-role="button" id="registerSubmit">Register</a>
        <a id='lnkDialog' href="#dialog" data-rel="dialog" data-transition="pop" style='display:none;'></a>
     </div>
</div>

和我的JavaScript是：

$(document).on('click', '#registerSubmit', function(event){

    username = $("#uName").val();

    if (username.length < 5) {

    $("#lnkDialog").click();
    $("#text").html("Username Length too short");
    } else if (username.length > 10) {
        alert ("Username must be less than 5 charcters");
    }else {
        password = $("#pWord").val();

        if (password.length < 5) {
            alert ("Password must be greater than 5 charcters");
        } else if (password.length > 10) {
            alert ("Password must be less than 5 charcters");
    } else {
        //otherstuff
    }
   }
  }
});

Answer 1

要將alert替換為jQuery消息框，建議查看JQuery UI的dialog（）函數。

您可以通過以下方式將其中一個警報寫為對話框：

alert ("Password must be greater than 5 charcters");

變成這個：

$("<div>Password must be greater than 5 charcters</div>").dialog();

我喜歡這樣的事實，您可以自定義dialog()函數使用的div元素，以使其外觀和感覺令人滿意。 您可以在其中添加顏色，動畫，定時功能等。

試試看，讓我知道它是如何工作的。 任何問題？ 嘗試在下面的評論中提問。

資料來源： jQuery UI Alert對話框替代alert（）

Answer 2

您正在嘗試使用對話框小部件。 該小部件已棄用，並將在1.5> api：對話框中刪除
您可以使用彈出窗口小部件打開“對話框”。 > API：彈出

實現它的最簡單方法是將彈出div硬編碼到頁面中。 該彈出窗口必須在頁面div內。 如果要在多個頁面上使用彈出窗口，則必須調用$( "#popup-outside-page" ).enhanceWithin().popup(); DOM准備好后

對話框彈出示例（不可忽略）：

要打開彈出窗口，只需調用$("#popupDialog").popup("open")

 <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" data-history="false" style="max-width:400px;"> <div data-role="header" data-theme="a"> <h1>Delete Page?</h1> </div> <div role="main" class="ui-content"> <h3 class="ui-title">Are you sure you want to delete this page?</h3> <p>This action cannot be undone.</p> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a> </div> </div>