我的表单关闭按钮不适用于 JavaScript

Question

我创建了一个 X 按钮来关闭带有 Javascript 的表单，但它不起作用，我不知道为什么。 一旦我打开它，我就无法关闭它。 我只是把按钮和表单的代码放在这里，而不是它后面的整个页面。 希望可以有人帮帮我。

html

<div class="open-btn">
  <button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
 <div class="modal_content">
        <div class="close"> 
          <i class="fas fa-times">X</i>
        </div>
        <h1>Ask away</h1>
        <form id="submit">
      <input type="text" placeholder="Name">
      <input type="email" id="email" placeholder="Email">
      <input type="text" placeholder="Subject">
      <textarea placeholder="Message"></textarea>
      <button>Submit</button>
    </form>
  </div>
</div>

css

#show-modal {
  border: none;
  border-bottom: 2px solid rgb(48, 51, 54);
  cursor: pointer;
  color: rgb(48, 51, 54);
  padding: 5px;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.1em;
  font-size: 13px;
  line-height: 1.4;
}
.open-btn {
  padding-top: 30px;
}


.modal {
  background-color: rgb(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  height: 1000px;
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.modal_content {
  background-color: #fff;
  padding: 2rem 4rem;
  width: 500px;
  height: 450px;
  border-radius: 4px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.5rem;
  display: block;
  margin: 15px auto;
  border: none;
  border-bottom: 1px solid #000000;
}
textarea {
  height: 100px;
}

.modal_content h1 {
  font-family: "Ibarra Real Nova", serif;
  color: rgba(40, 44, 48, 1);
  font-weight: bold;
  text-align: center;
  font-size: 35px;
}
.close {
  display: flex;
  justify-content: flex-end;
  margin-right: -2rem;
  margin-top: -1rem;
  cursor: pointer;
}
.submit {
  width: 100%;
  padding: 0.5rem;
  background-color: rgba(234, 203, 193, 0.4);
  border: none;
  color: #fff;
  transition: all 0.3s ease;
}
.submit:hover {
  background-color: rgba(143, 126, 121, 0.4);
}

.modal--hidden {
  display: none;
} 

JavaScript

document.getElementById("show-modal").addEventListener("click", function() {
  document.querySelector(".modal").style.display = "flex";
});
document.querySelector(".fas fa-times").addEventListener("click", function() {
  document.querySelector(".modal").style.dispay = "none";
});

https://codepen.io/joanaoli09/pen/JjYoZoa

Answer 1

首先，您的点击 position 和X不同。 尽管您在i上附加了事件，但正在单击X 。 在这些情况下，将X作为i的文本。 其次它必须是document.querySelector(".fas.fa-times")而不是document.querySelector(".fas fa-times")并且第三使用classList.toggle而不是将 class 添加到样式属性

 document.getElementById("show-modal").addEventListener("click", function() { togglElementeClass(); }); document.querySelector(".fas.fa-times").addEventListener("click", function() { togglElementeClass(); }); function togglElementeClass() { document.querySelector(".modal").classList.toggle('flex'); }

 #show-modal { border: none; border-bottom: 2px solid rgb(48, 51, 54); cursor: pointer; color: rgb(48, 51, 54); padding: 5px; font-family: "Lato", sans-serif; letter-spacing: 0.1em; font-size: 13px; line-height: 1.4; }.open-btn { padding-top: 30px; }.modal { background-color: rgb(0, 0, 0, 0.8); position: absolute; top: 0; height: 1000px; width: 100%; display: none; justify-content: center; align-items: center; }.modal_content { background-color: #fff; padding: 2rem 4rem; width: 500px; height: 450px; border-radius: 4px; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 0.5rem; display: block; margin: 15px auto; border: none; border-bottom: 1px solid #000000; } textarea { height: 100px; }.modal_content h1 { font-family: "Ibarra Real Nova", serif; color: rgba(40, 44, 48, 1); font-weight: bold; text-align: center; font-size: 35px; }.close { display: flex; justify-content: flex-end; margin-right: -2rem; margin-top: -1rem; cursor: pointer; }.submit { width: 100%; padding: 0.5rem; background-color: rgba(234, 203, 193, 0.4); border: none; color: #fff; transition: all 0.3s ease; }.submit:hover { background-color: rgba(143, 126, 121, 0.4); }.modal--hidden { display: none; }.flex { display: flex; }.fas.fa-times { width: 20px; height: 20px; border: 1px solid green; }

 <div class="open-btn"> <button id="show-modal"><strong>Open Form</strong></button> </div> <div class="modal modal--hidden"> <div class="modal_content"> <div class="close"> <i class="fas fa-times">X</i> </div> <h1>Ask away</h1> <form id="submit"> <input type="text" placeholder="Name"> <input type="email" id="email" placeholder="Email"> <input type="text" placeholder="Subject"> <textarea placeholder="Message"></textarea> <button>Submit</button> </form> </div> </div>

Answer 2

问题出在您的第二个事件侦听器中：

您正在尝试通过".fa fa-times"获取元素，这不是您的交叉元素的有效选择器。

只需将".fa fa-times" ".fa.fa-times ".fa-times" ，它应该可以完美运行。

document.querySelector(".fa-times").addEventListener("click", function() {
  document.querySelector(".modal").style.display = "none";
});

Answer 3

你有两个关于结束活动的错误。 其中一个是你的 class 名字你需要写 fa-times 另一个你写的显示是错误的

document.querySelector(".fa-times").addEventListener("click", function() {
  console.log("casa")
   document.querySelector(".modal").style.display = "none";

});

Answer 4

首先，通过第三方库提供的通用类（如fas fa ）获取元素（在这种情况下是 font-awesome）不是一个好习惯。 因为可以对页面中的另一个元素使用相同的类。 我建议在这种情况下使用 id 或特定的 class。 另一个问题是我们通常将<button>用于不<i>的操作。 <i>标签还没有准备好操作，所以通过点击它，你实际上点击了它的内容（X）而不是标签。 现在您的代码中的问题是，当您在 JS 中设置 display:flex 时，元素会获取样式，而当您document.querySelector(".modal").style.dispay = "none"; 您没有清除以前的样式（display:flex），因此它们都被应用了。 您应该清除 display:flex 然后应用 display:none 或制作像d-flex这样的 class ，通过单击切换。

在 HTML

<div class="close">
  <i id="close-btn" class="fas fa-times">X</i>
</div>

在 CSS

.d-flex
{
  display:flex !important;
}

在 Js 中

document.getElementById("show-modal").addEventListener("click", function() {
  togglElementeClass();
});
document.querySelector("#close-btn").addEventListener("click", function() {
  togglElementeClass();
});

function togglElementeClass() {
  document.querySelector(".modal").classList.toggle('d-flex');
}

Answer 5

 document.getElementById("show-modal").addEventListener("click", function() { document.querySelector(".modal").style.display = "flex"; }); function closeMe() { document.querySelector(".modal").style.display = "none"; }

 #show-modal { border: none; border-bottom: 2px solid rgb(48, 51, 54); cursor: pointer; color: rgb(48, 51, 54); padding: 5px; font-family: "Lato", sans-serif; letter-spacing: 0.1em; font-size: 13px; line-height: 1.4; }.open-btn { padding-top: 30px; }.modal { background-color: rgb(0, 0, 0, 0.8); position: absolute; top: 0; height: 1000px; width: 100%; display: none; justify-content: center; align-items: center; }.modal_content { background-color: #fff; padding: 2rem 4rem; width: 500px; height: 450px; border-radius: 4px; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 0.5rem; display: block; margin: 15px auto; border: none; border-bottom: 1px solid #000000; } textarea { height: 100px; }.modal_content h1 { font-family: "Ibarra Real Nova", serif; color: rgba(40, 44, 48, 1); font-weight: bold; text-align: center; font-size: 35px; }.close { display: flex; justify-content: flex-end; margin-right: -2rem; margin-top: -1rem; cursor: pointer; }.submit { width: 100%; padding: 0.5rem; background-color: rgba(234, 203, 193, 0.4); border: none; color: #fff; transition: all 0.3s ease; }.submit:hover { background-color: rgba(143, 126, 121, 0.4); }.modal--hidden { display: none; }

 <div class="open-btn"> <button id="show-modal"><strong>Open Form</strong></button> </div> <div class="modal modal--hidden"> <div class="modal_content"> <div class="close"> <i class="fas fa-times" onclick="closeMe()">X</i> </div> <h1>Ask away</h1> <form id="submit"> <input type="text" placeholder="Name"> <input type="email" id="email" placeholder="Email"> <input type="text" placeholder="Subject"> <textarea placeholder="Message"></textarea> <button>Submit</button> </form> </div> </div>