使用单独的 JS 文件时不显示 JQuery UI 对话框答案

【问题标题】：JQuery UI Dialog Not Showing when using a separate JS File使用单独的 JS 文件时不显示 JQuery UI 对话框
【发布时间】：2014-07-28 00:08:17
【问题描述】：

我是 Javascript 和 JQuery 的新手，我想创建一个基本的社交网站。不过，我卡在了登录页面上。我基本上希望网站做的是，当您单击登录时，会弹出一个对话框并说您的密码和用户名不正确，并有两个按钮说注册和取消。我知道你可以使用 JQuery Dialog UI 来做到这一点，但我正在努力做到这一点。这些是我的 HTML、Javascript 和 CSS 页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="css/login.css">
        <!-- include the jquery library -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <!-- include the jquery ui library -->
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
 // show the dialog when submit is clicked and checked
 function showDialog(){
    /* select the div you want to be a dialog, in our case it is 'basicModal'
    you can add parameters such as width, height, title, etc. */
    $( "#basicModal" ).dialog({
        modal: true,
        title: "Are you sure?",
        buttons: {
            "YES": function() {
                window.open('signup.html');
            },
            "NO": function() {
                $( this ).dialog( "close" );
            }
        }
    });

});
</script>

        <script src="js/script.js"></script>


    </head>
<body>

<section class="loginform">  
<form name="login" action="" method="post" onsubmit="return check(login)" accept-charset="utf-8">  
    <ul>  
        <li><label for="usermail">Email</label>  
        <input type="username" name="username" placeholder="username" required></li>  
        <li><label for="password">Password</label>  
        <input type="password" name="password" placeholder="password" required></li>  
        <li>  
        <input type="submit" value="Login" ></li>  
    </ul>  
</form>  
</section>
    <!--
    -this is the actual dialog, yes, it is included in your html body, it is just hidden
    -we did not set the dialog 'title' here, we set it in the js parameter
-->
<div id="basicModal">
   You mad? Username and Password are not correct. Please sign up using the button below.
</div>



</body>
</html>

这是我的 Javascript 页面

function check(form) {
/*the following code checkes whether the entered email and password are matching*/



    if (form.username.value === "user" && form.password.value === "pass") {
        window.open('home.html'); /*opens the target page while Id & password matches*/
    } else {
        //alert("Password or Username Not Found. Please sign up."); /*displays error message*/
        showDialog();
    }

}

还有我的 CSS

ul
{
    list-style-type: none;
}

.loginform {

    margin: 20% auto;
               width:200px;
}

/* dialog div must be hidden */
 #basicModal{
        display:none;
}

【问题讨论】：

您的check 函数没有返回任何内容。它必须返回false 以防止表单提交。
对话框仍未显示。
你能做一个 jsfiddle 来演示这个问题吗？
jsfiddle.net/u23g7 不确定这是否有用。从未使用过 jsfiddle。我只想在用户名和密码不等于用户并通过时弹出 JQuery 对话框。但它显然没有
我将小提琴更改为使用No wrap 选项，否则check 函数不在全局范围内并且永远不会被调用。然后我收到警报：jsfiddle.net/barmar/u23g7/1

标签： javascript jquery css user-interface jquery-ui-dialog

【解决方案1】：

你需要从check()函数中return false来阻止表单提交：

function check(form) {
    /*the following code checkes whether the entered email and password are matching*/
    if (form.username.value === "user" && form.password.value === "pass") {
        window.open('home.html'); /*opens the target page while Id & password matches*/
    } else {
        //alert("Password or Username Not Found. Please sign up."); /*displays error message*/
        showDialog();
        return false;
    }
}

您还有语法错误。 showDialog() 的末尾不应该有 );。

这是working fiddle

【讨论】：