Question

好吧，我知道模态联系表单有很多问题/答案，但我想知道如何在页面上有一个正常的联系表单，当提交时，PHP操作会弹出一个模态，说“谢谢你们联系我们”，或者说是这样的话，然后关闭的能力。我之前已经完成了HTML联系表单并且迷上了PHP操作，从来没有处于模态...任何简单的解决方案（不使用插件）？

如果有人有这个问题并希望得到答复，请务必投票。

Answer 1

如果您想拥有一个无JavaScript的解决方案，那么您的表单处理脚本将需要能够呈现表单的所有状态。其中包括：

初始未填写表格
对第一次提交的回复可能是：
- 显示部分或错误填写的表单，并标记错误
- 感谢信息
回复感谢信息

模态弹出窗口只是一个半透明的容器元素（例如<div>），它被设置为z位于所有其他html（除了它的子节点）之上并覆盖整个视口。它包含一个表单和您可能喜欢的任何其他内容。如果未使用，则其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是我的两个最爱。

简单的联系表格与模态响应

1 个答案: