簡單的聯系方式，模態響應

Question

好的，我知道模態聯系表有很多問題/答案，但是我想知道如何在頁面上使用普通的聯系表，提交后，PHP操作會以模態彈出，說：“謝謝。以與我們聯系”，或者類似的內容，然后關閉。 我已經完成了HTML聯系人表單，並且之前從未參與過PHP操作，只是從來沒有采用過模式操作...任何簡單的解決方案（不使用插件）？

如果有人有這個問題並希望得到回答，請務必投票。

Answer 1

如果您想要一個無JavaScript的解決方案，那么您的表單處理腳本將需要能夠呈現表單的所有狀態。 這些包括：

• 初始未填寫表格
• 對首次提交的回復，可能是：
  • 顯示部分或錯誤填寫的表格，並標有錯誤
  • 謝謝留言
• 回復謝謝留言

模態彈出窗口只是一個半透明的容器元素（例如<div> ），其樣式設置為在所有其他html（子元素除外）之上z放置並覆蓋整個視口。 它包含一個表格以及您可能想要的其他任何內容。 不使用時，其display屬性設置為none 。

因此，您的php表單處理程序可能會像這樣工作：

$modalclass='modalhide';
$filteredpost=array();

if(isset($_POST['submit1']){ //user submitted form data
    //validate submitted data
    $filteredpost = my_cleanup_function($_POST); 
    if(my_form_is_good($filteredpost){
      $modalclass='modalshow';
      $filteredpost=array();
    } 
} 

echo <<< EOF
<form method='POST' name='mainform' action='myhandler.php'>
   //other form fields
   <input type='submit' name='submit1'>
</form>
<div class='$modalclass'>
   <form name='thanksmodal' method='POST' action='myhandler.php'>
      //content of some sort
      <input type='submit' name='thankssubmit'>
   </form>
</div>
EOF;

AJAX方法類似，除了javascript攔截提交按鈕動作，異步提交到表單處理腳本並顯示結果。 周圍有很多JavaScript庫可以簡化此過程。 jQuery和jQuery-UI是我的兩個最愛。