Javascript 提交后如何关闭表单模式?

Javascript 提交后如何关闭表单模式?,javascript,html,Javascript,Html,我已经创建了一个工作正常的表单,但在单击提交并单击警报上的“确定”后,该模式将继续在页面上显示书面信息。我希望它在之后关闭。有人能帮我吗 页面如下: 下面是快速查看的代码: <h1> I'd love to chat with you about your upcoming project. </h1> <div class="intro-text">

我已经创建了一个工作正常的表单,但在单击提交并单击警报上的“确定”后,该模式将继续在页面上显示书面信息。我希望它在之后关闭。有人能帮我吗

页面如下:

下面是快速查看的代码:

<h1>
                I'd love to chat with you about your upcoming project.
              </h1>
              <div class="intro-text">
                Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss
                any ideas that you might have, you can contact me for any
                clarification you need. I'll get back to you in 2-3 days.
              </div>
              <div class="row open-form">
                <div class="open-btn">
                  <button id="show-modal"><strong>Open Form</strong></button>
                </div>
              </div>
    <div class="modal modal--hidden">
      <div class="modal_content">
        <div class="close">
          <i class="fas fa-times" onclick="closeMe()"></i>
        </div>
        <h1>Ask away</h1>
        <form id="submit">
          <input type="text" placeholder="Name" name="name" />
          <input type="email" id="email" placeholder="Email" name="email"/>
          <input type="text" placeholder="Subject" name="subject" />
          <textarea placeholder="Message" name="message"></textarea>
          <button class="submit">Submit</button>
        </form>
     </div>
   </div>
<script src="./JavaScript/action_page.js"></script>
提交后调用
closeMe()
函数:

document.querySelector("#show-modal").addEventListener("submit", event => {
  event.preventDefault();
  toggleModal();
  let formData = new FormData(document.querySelector("#show-modal"));
  console.log(
    "Name:" + formData.get("name"),
    "Email:" + formData.get("email"),
    "Subject:" + formData.get("subject"),
    "Message:" + formData.get("message")
  );
  alert("Thank you for your message!");
  closeMe();
})
提交后调用
closeMe()
函数:

document.querySelector("#show-modal").addEventListener("submit", event => {
  event.preventDefault();
  toggleModal();
  let formData = new FormData(document.querySelector("#show-modal"));
  console.log(
    "Name:" + formData.get("name"),
    "Email:" + formData.get("email"),
    "Subject:" + formData.get("subject"),
    "Message:" + formData.get("message")
  );
  alert("Thank you for your message!");
  closeMe();
})
提交后只需调用“closeMe()”函数。

提交后只需调用“closeMe()”函数。

提交后需要调用closeMe()函数。 Alert是一个阻塞函数,意味着如果不关闭它,下面的代码将不会执行。因此,您不必捕获警报关闭事件,只需在警报下面写下代码,当警报窗口关闭时,下面的代码将自动执行

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

    function closeMe() {
      document.querySelector(".modal").style.display = "none";
    }

    document.querySelector("#show-modal").addEventListener("submit", event => {
    event.preventDefault();
    toggleModal();
    let formData = new FormData(document.querySelector("#show-modal"));
    console.log(
    "Name:" + formData.get("name"),
    "Email:" + formData.get("email"),
    "Subject:" + formData.get("subject"),
    "Message:" + formData.get("message")
    );
    alert("Thank you for your message!");
     closeMe();


})
提交后需要调用closeMe()函数。 Alert是一个阻塞函数,意味着如果不关闭它,下面的代码将不会执行。因此,您不必捕获警报关闭事件,只需在警报下面写下代码,当警报窗口关闭时,下面的代码将自动执行

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

    function closeMe() {
      document.querySelector(".modal").style.display = "none";
    }

    document.querySelector("#show-modal").addEventListener("submit", event => {
    event.preventDefault();
    toggleModal();
    let formData = new FormData(document.querySelector("#show-modal"));
    console.log(
    "Name:" + formData.get("name"),
    "Email:" + formData.get("email"),
    "Subject:" + formData.get("subject"),
    "Message:" + formData.get("message")
    );
    alert("Thank you for your message!");
     closeMe();


})

如果总是想关闭模式,只需将“数据解除”属性添加到该模式

<button class="submit" data-dismiss="modal">Submit</button> 
提交

如果您总是想关闭模式,只需将数据解除属性添加到模式中即可

<button class="submit" data-dismiss="modal">Submit</button> 
提交

是否尝试从
submit
事件处理程序调用
closeMe()
函数?是否尝试从
submit
事件处理程序调用
closeMe()
函数?