关闭 Fancybox Window

Question

当你点击一个带有表单的花式框时有一个按钮，在填写表单并点击发送按钮后，我希望这个 window 自动关闭，另一个打开带有文本 "that the message was sent successfully" 几秒钟后它会消失，或者在 window 区域外按下时消失。

$("form").submit(function() { //Change
    var th = $(this);
    $.ajax({
        type: "POST",
        url: "mail.php", //Change
        data: th.serialize()
    }).done(function() {
        $('#alert-massage').fadeIn(500);
        alert("Thank you!");
        setTimeout(function() {
            // Done Functions
            th.trigger("reset");
        }, 1000);
    });
    return false;
});

<div id="modal">
<div class="modal__wrap">
    <div class="modal__title">
        Write me
    </div>
    <form >
        <!-- Hidden Required Fields -->
        <input type="hidden" name="project_name" value="kylun-Serg">
        <input type="hidden" name="admin_email" value="kylun1serg@gmail.com">
        <input type="hidden" name="form_subject" value="popup-form">
        <!-- END Hidden Required Fields -->

        <input type="text" placeholder="Username" name="Name"   required>
        <input type="email" placeholder="Email" name = "E-mail"required>
        <input type="phone" placeholder="Phone" name = "Phone">
        <textarea placeholder="Massage" name="Massage"></textarea>
        <button type="submit" class="btn">
        Send
        </button>
    </form>
</div>

Answer 1

提交表单时可以触发函数

<button type="submit" onclick="myFunction()" class="btn">Send</button>

函数将隐藏模式并显示成功消息并重新加载当前页面。

function myFunction(){
document.getElementById("modal").style.display = "none";
alert('Form submitted successfuly.');
location.reload();
}

关闭 Fancybox Window

Closing the Fancybox Window

html

javascript

css

jquery

fancybox