弹出窗口无法正确显示

Question

单击

btn1

后，类（弹出 div 为

popup-open

，表单 div 为

popup-form

）将添加到类列表中。

我试图在提交表单后显示“谢谢”消息。当点击提交按钮时，会触发弹出窗口。我的弹出窗口仅显示不到 1 秒，然后自动隐藏。

@font-face {
  font-family: Space;
  src: url(https://fonts.google.com/specimen/Space+Grotesk);
}

body {
  font-size: 18px;
  font-weight: 500;
  margin: 2px;
  letter-spacing: 2px;
}

#side {
  height: 670px;
}

.cardfront {
  color: white;
  background-image: url(images/bg-card-front.png);
  background-repeat: no-repeat;
  padding: 8px;
  position: relative;
  top: -585px;
  left: 129px;
  height: 230px;
}

.cardfront img {
  margin: 16px;
}

.cardfront p {
  position: relative;
  left: 31px;
  font-size: 35px;
  top: 19px;
  letter-spacing: 2px;
}

.cardfront div {
  margin-top: 40px;
}

.cardfront div span:first-child {
  margin-left: 14px;
  margin-right: 212px;
}

.cardback {
  background-image: url(images/bg-card-back.png);
  width: 467px;
  height: 305px;
  background-repeat: no-repeat;
  margin-top: -560px;
  left: 260px;
  position: relative;
}

.cardback p {
  position: relative;
  left: 354px;
  top: 107px;
  font-size: 26px;
  letter-spacing: 1px;
}

form {
  font-weight: 500;
}

#Name,
#cardNumber {
  width: 332px;
  height: 39px;
  border-radius: 10px;
  border: 1px solid;
  border-color: #ddd0d0;
  margin-top: -10px;
  font-size: 18px;
  padding-left: 11px;
  letter-spacing: 2px;
}

form div input {
  height: 57px;
  width: 73px;
  border: 1px solid;
  border-radius: 10px;
  border-color: #ddd0d0;
  margin-top: -8px;
  font-size: 18px;
  padding-left: 13px;
  letter-spacing: 2px;
}

#cvc {
  width: 124px;
  margin-right: -17px;
}

form #row div {
  margin-right: 20px;
}

#row {
  display: flex;
  flex-direction: row;
}

#btn {
  width: 351px;
  height: 48px;
  font-size: larger;
  color: whitesmoke;
  background-color: #060e1e;
  border: 1px solid;
  border-radius: 7px;
  margin-top: 24px;
  transition: 0.5s;
}

#btn:active,
#btn:hover {
  background-image: linear-gradient(219deg, #461d81, #121112ed);
  cursor: pointer;
}

.content {
  display: flex;
}

.form {
  margin-top: 10%;
  margin-left: 30%;
}

.popup {
  visibility: hidden;
  position: relative;
  text-align: center;
  margin-top: -467px;
  left: 27%;
  transition: 2s;
}

.thnks {
  font-weight: bold;
}

.msg2 {
  color: #666262;
}

#btn2 {
  width: 351px;
  height: 48px;
  font-size: larger;
  color: whitesmoke;
  background-color: #060e1e;
  border: 1px solid;
  border-radius: 6px;
  transition: 0.5s;
}

#btn2:active,
#btn2:hover {
  background-image: linear-gradient(219deg, #461d81, #121112ed);
  cursor: pointer;
}

.popup-open {
  visibility: visible;
}

.popup-form {
  visibility: hidden;
}

Answer 1

如果您使用表单和提交按钮，例如

 <form>
   <button type="submit">
</form>

那么问题是当您提交任何表单时，它会自动重新加载窗口，这是表单的默认行为。 所以这将重置页面上的所有内容。 您可以通过使用“ onsubmit =“return false;”此事件来阻止此默认行为，如下面的代码所示

<form onsubmit="return false;" >
   <button type="submit">
</form>

如果现在您的问题仍未解决，请提供有关代码的更多详细信息（例如，html 代码、javascript 文件）。