Javascript 以编程方式关闭引导中的模式对话框，并在提交时显示另一个页面
当用户转到需要注册的页面时，我想显示一个带有id和密码的引导模式对话框。当用户按下提交按钮时，我想：Javascript 以编程方式关闭引导中的模式对话框，并在提交时显示另一个页面,javascript,bootstrap-4,bootstrap-modal,Javascript,Bootstrap 4,Bootstrap Modal,当用户转到需要注册的页面时，我想显示一个带有id和密码的引导模式对话框。当用户按下提交按钮时，我想： 验证密码并注册 关闭对话框 将它们带到另一个页面以显示一些信息 当前发生的情况是当用户按下Submit按钮时。我进行了验证并试图隐藏引导模式对话框，但随后页面重新显示，对话框返回。这种情况一再发生 这是你的电话号码 以下是HTML页面： <!DOCTYPE html> <html lang="en"> <head> <!-- Require
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Immedia Signup</title>
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<!-- Immedia stylsheet overrides -->
<!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
<style>
html,
body {
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* color: #212529; */
/* color: #bccee0; */
color: #bccee0;
}
.big-text-on-bg-img {
width: 75%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
@media (min-width: 450px) {
.container-xs {
max-width: 500px;
}
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
</style>
<title>Immedia Home</title>
</head>
<body onload="onloadHandler()">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
</div>
<!-- cover-container -->
<!-- Modal -->
<div
class="modal fade"
id="signupModal"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-title">
Thanks for entering an email address and password to protect your
account.
</h5>
</div>
<!-- modal-header -->
<div class="modal-body">
<form id="signup-form" onsubmit="submitHandler()">
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
autocomplete="username"
class="form-control"
id="email"
aria-describedby="emailHelp"
required
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never spam you or share your email.</small
>
</div>
<!-- form-group -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
autocomplete="new-password"
class="form-control"
id="pwd-field"
aria-describedby="passwordHelp"
required
/>
<small id="passwordHelp" class="form-text text-muted">
Passwords must have at least 8 characters with one uppercase
one lowercase, one digit and one special character
"!@#$%&*()"
</small>
</div>
<!-- form-group -->
<div class="form-group">
<button
id="submit-button"
type="submit"
class="btn btn-primary"
>
Submit
</button>
</div>
<!-- form-group -->
</form>
</div>
<!-- modal-body -->
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal fade-->
<!-- JavaScript -->
<script>
// Function definitions
//
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function() {
const email = $("#email").val();
const password = $("#pwd-field").val();
console.info("email: " + email + ', password: "' + password + '"');
if (true) {
// Do not check for valid password. Assume it is for now.
console.info("valid password: ", password);
try {
// Signup user here
console.info("submitHandler(): successfully signed up");
$("#signupModal").modal(hide);
// They signed up successfully. Send them to the next page (for example only)
window.location.href = "https://www.duckduckgo.com";
} catch (err) {
console.error("Error signing up: ", err);
}
} else {
// invalid password
$("#pwd-field").val("");
}
console.info("submitHandler(): exiting function");
});
// Begin page execution
function onloadHandler() {
console.info("onloadHandler()");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
</script>
</body>
</html>
伊梅迪亚注册
html，
身体{
背景：url（）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
/*颜色：#212529*/
/*颜色：#bccee0*/
颜色：#bccee0；
}
.bg img上的大文本{
宽度：75%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
字体大小：2.5rem；
字体大小：400；
线高：1.2；
}
@介质（最小宽度：450px）{
.容器xs{
最大宽度：500px；
}
}
.显示器-5{
字体大小：2.5rem；
字体大小：300；
线高：1.2；
}
伊梅迪亚之家酒店
模态测试页
感谢您输入电子邮件地址和密码以保护您的安全
账户
电子邮件地址
我们永远不会向您发送垃圾邮件或共享您的电子邮件。
密码
密码必须至少包含8个大写字符
一个小写、一个数字和一个特殊字符
“！@$%&；*（）”
提交
//函数定义
//
$（“#signupModal”）.on（“hidden.bs.modal”，function（）{
$（“正文”）.removeClass（“signupModal”）；
});
//在页面上隐藏DOM元素
//当用户按submit时处理注册
$（“#提交按钮”）。单击（函数（）{
const email=$（“#email”）.val（）；
常量密码=$（“#pwd字段”）.val（）；
控制台信息（“电子邮件：+email+”，密码：“+password+”）；
如果（真）{
//不要检查有效的密码。假设现在是。
控制台信息（“有效密码：”，密码）；
试一试{
//在这里注册用户
console.info（“submitHandler（）：已成功注册”）；
$（“#signupModal”）.modal（隐藏）；
//他们已成功注册。请将他们发送到下一页（仅限示例）
window.location.href=”https://www.duckduckgo.com";
}捕捉（错误）{
console.error（“注册错误：”，err）；
}
}否则{
//无效密码
$（“#pwd字段”）.val（“”）；
}
info（“submitHandler（）：退出函数”）；
});
//开始页面执行
函数onloadHandler（）{
info（“onloadHandler（）”）；
$（“body”）.addClass（“signupModal”）；
$（“#signupModal”）.modal（“切换”）；
}
表单中的提交按钮。这将触发表单提交
，尝试重定向提交请求。由于您没有在表单
标记上指定任何操作
和方法
属性，因此浏览器不知道将表单提交
请求重定向到何处，您会看到一个空白页面
在代码中，您已经在submit按钮上使用js指定了一个操作侦听器。监听器中的代码将执行，然后执行默认操作，即表单submit
。要防止此情况发生，请添加e.preventDefault（）
，并且不执行表单提交
事件
下面的代码起作用。在JSFIDLE或stackoverflow代码段中运行代码时，您将得到一个控制台错误为“拒绝在帧中显示“””的空白页，因为祖先违反了以下内容安全策略指令：“帧祖先'自我'”。这显示页面重定向正确发生，并将在应用程序中正常工作。因此，JSFIDLE不喜欢在其代码片段中显示其他网站
$（“#signupModal”）.on（“hidden.bs.modal”，function（））{
$（“正文”）.removeClass（“signupModal”）；
});
//在页面上隐藏DOM元素
//当用户按submit时处理注册
$（“#提交按钮”）。单击（功能（e）{
//**********添加下面的代码以防止defauilt submit按钮表单提交**********
e、 预防默认值（）；
const email=$（“#email”）.val（）；
常量密码=$（“#pwd字段”）.val（）；
控制台信息（“电子邮件：+email+”，密码：“+password+”）；
如果（真）{
//不要检查有效的密码。假设现在是。
控制台信息（“有效密码：”，密码）；
试一试{
//在这里注册用户
console.info（“submitHandler（）：已成功注册”）；
$（“#signupModal”）.modal（'hide'）；
//他们已成功注册。请将他们发送到下一页（仅限示例）
//**********更改要替换的代码，以便从浏览器中删除注册页