如何在成功提交後關閉彈出窗口

Question

我的網站很簡單，它有文字說「點擊這裏」，點擊 將在屏幕中心打開一個模式類型的聯繫表單。

當前表單提交時，它延遲1秒，然後調用submit.php 將數據發送到我的電子郵件。

而不是重定向到submit.php，我想保持在同一頁面上，並簡單地關閉彈出式聯繫表格 。

因此，它應該是這樣的：

點擊「點擊這裏」>詳細填寫彈出形式>點擊提交>表單提交後1秒鐘，然後完全關閉。（無需重新直接）

您可以查看我的演示站點here.

下面是HTML表單：

<form method="post" action="submit.php" id="contactform" class="signin"> 
<h1>On submit, this window should close</h1> 

     <input name="name" id="name" type="text" class="feedback-input" placeholder="Name" /> 
     <input name="email" id="email" type="text" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" /> 
     <div class="antispam"> 
     <br /><input name="url" type="hidden" /></div> 
     <textarea name="message" id="message" class="feedback-input" placeholder="Write away!" required></textarea> 

<button id="flybutton"> 
      <p>Submit here</p> 
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> 
       <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z 
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path> 
      </svg> 

     </button> 
</form> 

你可以看到表單ID是「聯繫形式」和按鈕ID爲「flybutton」

以下腳本目前使用此數據，延遲1秒，提交表單，然後將 重定向到submit.php。

相反，我需要它延遲1秒，提交表單，然後關閉彈出窗口（和黑色背景）。

目前我有一個腳本，將通過Escape鍵關閉窗體，所以也許這可能以某種方式實現？ 我覺得我的腳本需要以某種方式組合。

這裏是我的腳本有：

1秒的延遲+提交表單

<script> 
     var $btn = $('#flybutton'); 
     $("#contactform").validate({ 
      submitHandler: function (form) { 
       fly(form); 
      } 
     }); 

     $btn.on('fliyingEnd', function (e, form) { 
      form.submit(); 
     }) 

     function fly(form){ 

      $btn.toggleClass('clicked'); 
      $btn.find('p').text(function(i, text) { 
       return text === "Fire!" ? "Fire!" : "Fire!"; 
      }); 

      setTimeout(function() { 
       $btn.trigger('fliyingEnd', [form]); 
      }, 1000); 

     } 
    </script> 

關閉格式框（＃登錄框）和黑色背景（#mask）通過ESC鍵：

<script type="text/javascript"> 
$(document).keyup(function(e) { 
    if (e.keyCode == 27) { 
     $("#mask").fadeOut(300); 
    } 
    if (e.keyCode == 27) { 
     $("#login-box").fadeOut(300); 
    } 
}); 
</script> 

其他用戶幫助這個腳本都Ø我不知道它的目的：

<script type="text/javascript"> 
$(document).ready(function() { 
$('a.login-window').click(function() { 

      //Getting the variable's value from a link 
    var loginBox = $(this).attr('href'); 

    //Fade in the Popup 
    $(loginBox).fadeIn(300); 

    //Set the center alignment padding + border see css style 
    var popMargTop = ($(loginBox).height() + 24)/2; 
    var popMargLeft = ($(loginBox).width() + 24)/2; 

    $(loginBox).css({ 
     'margin-top' : -popMargTop, 
     'margin-left' : -popMargLeft 
    }); 

    // Add the mask to body 
    $('body').append('<div id="mask"></div>'); 
    $('#mask').fadeIn(300); 

    return false; 
}); 
// When clicking on the button close or the mask layer the popup closed 
    $('a.closest, #mask').bind('click', function() { 
     $('#mask , .login-popup').fadeOut(300 , function() { 
     $('#mask').remove(); 
    }); 
    return false; 
    }); 
}); 
</script> 

能否請你告訴我，爲了得到我所需要的功能要編輯的代碼？

我無法得到的jsfiddle工作，但here's my demo site again

UPDATE： 我已經納入AJAX，但我有一個問題。具體來說，表單提交但它仍然重定向。

包括在此我下​​面表格

<div id="result"></div> 

，這裏是腳本..如何讓我沒有重新直接？

<script> 
$(document).ready(function() { 

    /* Attach a submit handler to the form */ 
$("#contactform").submit(function(event) { 

    /* Stop form from submitting normally */ 
    event.preventDefault(); 

    /* Clear result div*/ 
    $("#result").html(''); 

    /* Get some values from elements on the page: */ 
    var values = $(this).serialize(); 

    /* Send the data using post and put the results in a div */ 
    $.ajax({ 
     url: "submit.php", 
     type: "post", 
     data: values, 
     success: function(){ 
      alert("success"); 
      $("#result").html(''); 
     }, 
     error:function(){ 
      alert("failure"); 
      $("#result").html('An error occurred'); 
     } 
    }); 
}); 
}); 
</script> 

非常感謝！

Answer 1

這就是現在被稱爲碼1秒後用戶點擊提交：

$btn.on('fliyingEnd', function (e, form) { 
     form.submit(); 
    }) 

希望表單提交後襬脫屏幕變暗（面具）和登錄彈出框，所以索性在兩段代碼添加到淡出這些元素出來：

$btn.on('fliyingEnd', function (e, form) { 
    form.submit(); 
    $('#mask').fadeOut(300); 
    $("#login-box").fadeOut(300); 
}) 

Answer 2

一個簡單的事情是：

$(document).ready(function(){ 

$('#a.login-window').dialog({ 
    modal: true, 
    autoOpen: false, 
    buttons: { 
     Ok: function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

Answer 3

我想你的演示鏈接，並在submit.php你存儲數據（我猜測），並顯示味精

Thank you for contacting us. 

We will get back to you within 24 hours. 


Go Back 

而是這條消息重定向頁面的使用PHP函數demo4.html 。 header('Location: '.demo4.html);

如果你上傳submit.php我會給出更多的細節。

Answer 4

所以，如果我找到了你的權利，你想發送數據到你的服務器，而不必重定向文件。你應該看看的JavaScript XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

所以，我會做這樣的事情：

function submit(){ 
    var contactform=$("#contactform"); 
    var formdata=new FormData(contactform); //create a js FormData object 

https://developer.mozilla.org/en-US/docs/Web/API/FormData

var xhr=new XMLHttpRequest(); 
    xhr.onreadystatechange=function(){ 
    // do something here (this is an event handler that is invoked a few times during uploading/downloading process) 
    } 
    xhr.open("POST","submit.php"); 
    xhr.send(formdata); 
} 

那麼你可以嵌入此像@Zach Sandlers回答

$btn.on('fliyingEnd', function (e, form) { 
    submit(); // here you send the data to the server 
    $('#mask').fadeOut(300); 
    $("#login-box").fadeOut(300); 
}) 

警告：braincompiled代碼！可能包含語法錯誤！

希望幫助