我创建了一个工作正常的表单,但是在单击“提交”并在警报上单击“确定”后,模式将继续在页面上显示书面信息。我希望它随后关闭。有人可以帮我吗?
这是页面:https://giacomosorbi.github.io/joanaoli09-module-i/contact.html
这是快速浏览的代码:
<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>
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()函数。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();
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句