当我单击"注册"超链接(放置在登录模式表单上(时，我的注册模式会弹出，但立即消失。我是jquery和javascript的菜鸟，所以这没有意义。我尝试添加以下代码(这也不起作用(而不是我在主代码上的内容。
$('.message a').click(function(){
modal.style.display = "none";
$("#RegisterModal").css("display","block");
})
我的主要代码是：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var modal = document.getElementById('LoginModal');
var modalreg = document.getElementById('RegisterModal');
var login = document.getElementById("butn");
var reg = document.getElementById("butn0");
var span = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close")[1];
login.onclick = function() {
modal.style.display = "block";
}
reg.onclick = function() {
modalreg.style.display = "block";
}
$('.message a').click(function(){ //message is the class of the //paragraph containing the link
modalreg.style.display = "block";
})
span.onclick = function() {
modal.style.display = "none";
}
span1.onclick = function() {
modalreg.style.display = "none";
}
window.onclick = function(event) {
if (event.target.id == 'LoginModal') {
modal.style.display = "none";
}
if (event.target.id == 'RegisterModal') {
modalreg.style.display = "none";
}
}
</script>
这是我的整个 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>1Tag</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body style="background-color: white;">
<div class="container-fluid" style="background-image: url('full.jpg'); min-width: 101.2%;">
<div>
<header>
<div>
<button class="button button1" id="butn0">Register</button>
<button class="button button2" id="butn">Login</button>
</div>
<h1>1Tag</h1>
</header>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" style="background-image: url('3.jpg');">
<span onclick="document.getElementById('close').style.display='none'" class="close" title="Close Modal" style="margin-right: 2%">×</span>
<form class="modal-content" style="background-color: transparent;" action="" method="post">
<div style="background-color: transparent; margin-left: 50px; margin-top: -10px; margin-right: 0; margin-bottom: 0; width: 400px;">
<h3 style="color: #acacac; font-size: 30px; font-family: Helvetica Neue;">Sign In</h3>
<p style="font-family: Helvetica Neue; color: #acacac;">Please fill in this form to create an account.</p>
<hr>
<label for="Username"><b style="font-family: Helvetica Neue; color: #acacac;">Username : </b></label>
<input type="name" placeholder="Enter Username" name="name" required>
<label for="email"><b style="font-family: Helvetica Neue; color: #acacac;">Email : </b></label>
<input type="mail" placeholder="Enter Email" name="email" required>
<label for="psw"><b style="font-family: Helvetica Neue; color: #acacac;">Password : </b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px; color: #acacac;"> <b style="font-family: Helvetica Neue; color: #acacac;">Remember me</b>
</label>
<p class="message">Are you not registered?<a href="" style="color:dodgerblue">Register</a>.</p>
<div class="clearfix">
<button type="button" id="cancel" onclick="document.getElementById('myModal').style.display='none'" class="button3" style="margin-right: 5%;
background-color: #333;
padding: 6px 16px;
font-size: 14px;">Cancel</button>
<button type="submit" class="button2" style=" padding:6px 16px; font-size: 14px;" name="login">Sign In</button>
</div>
</div>
</form>
</div>
</div>
<div id="myReg" class="modal">
<!-- Modal content -->
<div class="modal-content" style="background-image: url('3.jpg'); overflow-y: initial !important;">
<span onclick="document.getElementById('close').style.display='none'" class="close" title="Close Modal" style="margin-right: 2%">×</span>
<form class="modal-content" style="background-color: transparent;" action="http://localhost/fuckinFromSkratch/register.php" method="post">
<div style="background-color: transparent; margin-left: 50px; margin-top: -10px; margin-right: 0; margin-bottom: 0; width: 400px;">
<h3 style="color: #acacac; font-size: 30px; font-family: Helvetica Neue;">Sign Up</h3>
<p style="font-family: Helvetica Neue; color: #acacac;">Please fill in this form to log into your account.</p>
<hr>
<div style=" height: 250px; overflow-y: auto;">
<label for="Username"><b style="font-family: Helvetica Neue; color: #acacac;">Username : </b></label>
<input type="name" placeholder="Enter Username" id="uname" name="name" required>
<label for="email"><b style="font-family: Helvetica Neue; color: #acacac;">Email : </b></label>
<input type="mail" placeholder="Enter Email" name="email" required>
<label for="psw"><b style="font-family: Helvetica Neue; color: #acacac;">Password : </b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw2"><b style="font-family: Helvetica Neue; color: #acacac;">Confirm Password : </b></label>
<input type="password" placeholder="Confirm Password" name="psw2" required>
<label for="gender"><b style="font-family: Helvetica Neue; color: #acacac;">Gender(Male/Female) : </b></label>
<input type="name" placeholder="Enter Your Gender" id="gen" name="gender">
<label for="dtb"><b style="font-family: Helvetica Neue; color: #acacac;">Birth Date : </b></label>
<input type="name" placeholder="Enter Date of Birth" id="bday" name="dtb">
</div>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px; color: #acacac;"> <b style="font-family: Helvetica Neue; color: #acacac;">Remember me</b>
</label>
<p style="font-family: Helvetica Neue; color: #acacac;">By creating an account you agree to our <a href="" style="color:dodgerblue">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" id="cancel2" onclick="document.getElementById('myReg').style.display='none'" class="button3" style="margin-right: 5%;
background-color: #333;
padding: 6px 16px;
font-size: 14px;">Cancel</button>
<button type="submit" class="button2" style=" padding:6px 16px; font-size: 14px;" name="reg" id="register">Register </button>
</div>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var modal = document.getElementById('myModal');
var modalreg = document.getElementById('myReg');
var btn = document.getElementById("butn");
var btn0 = document.getElementById("butn0");
var span = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close")[1];
btn.onclick = function() {
modal.style.display = "block";
}
btn0.onclick = function() {
modalreg.style.display = "block";
}
$('.message a').click(function(){
modalreg.style.display = "block";
})
span.onclick = function() {
modal.style.display = "none";
}
span1.onclick = function() {
modalreg.style.display = "none";
}
window.onclick = function(event) {
if (event.target.id == 'myModal') {
modal.style.display = "none";
}
if (event.target.id == 'myReg') {
modalreg.style.display = "none";
}
}
</script>
</body>
</html>
这是模态的 css 部分：
.message{
font-family: Helvetica Neue;
color: #acacac;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.7);
}
/* Modal Content/Box */
.modal-content {
background-color: transparent;
margin: 3% auto;
padding: 5px 5px ;
width: 470px;
height: 530px;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* input fields */
input[type=mail], input[type=password], input[type=name] {
width: 60%;
padding: 9px;
margin: 5px 0 16px 0;
display: table;
border: none;
background: #f1f1f1;
}
/* when the inputs get focus */
input[type=mail]:focus, input[type=password]:focus,
input[type=name]:focus {
background-color: #ddd;
outline: none;
}
hr {
width: 90%;
border: 1px solid #f1f1f1;
margin-bottom: 20px;
margin-left: -3px;
color: #acacac;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small
screens
*/
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
抱歉，一开始不了解问题的目标。实际上，您的模态不会消失。这只是您单击后重新加载的页面 <a> .溶液：
$('.message a').click(function(event){
event.preventDefault();
modalreg.style.display = "block";
modal.style.display = "none";
});