gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:53:48 25 4
gpt4 key购买 nike

我是 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 以阻止表单提交:

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

关于javascript - 使用单独的 JS 文件时不显示 JQuery UI 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24981602/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com