javascript - 来自 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

要用 jQuery 消息框替换 alert，我建议查看 dialog() 用于 JQuery UI 的函数。

您可以通过更改将其中一个警报写为对话框:

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

进入这个:

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

我喜欢这样一个事实，即您可以自定义 dialog() 函数使用的 div 元素，以按照您喜欢的方式进行外观和感觉。您可以向其添加颜色、动画、定时功能等。

试一试，让我知道它是如何工作的。任何问题？尝试在下面的评论中提问。

来源: jQuery UI Alert Dialog as a replacement for alert()