我的表單關閉按鈕不適用於 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>