表单提交后加载模式

Question

相关页面:http: //marcmurray.net/test_sites/cans/news.php

我一直在尝试在用户提交电子邮件后加载消息确认模式一段时间,但根本无法使其工作.

到目前为止,我已经尝试回显整个脚本,触发脚本,更改URL中的哈希并检查它,这在网站的其他区域有效.

在页面上添加警报和回显文本等功能工作正常,但是当我使用show方法时它不起作用.这让我相信我要么错误地逃避字符,要么误解了模态的工作原理.任何人都可以看到我搞砸了吗？

PHP:

<?php
if(isset($_POST["submit"])) {
        // Checking For Blank Fields..
    if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
       echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
    else
        {
        // Check if the "Sender's Email" input field is filled out
        $email=$_POST['vemail'];
                // Sanitize E-mail Address
        $email =filter_var($email, FILTER_SANITIZE_EMAIL);
                // Validate E-mail Address
        $email= filter_var($email, FILTER_VALIDATE_EMAIL);
        $emailConfirmed=$_POST['vemail'];
        if (!$email){
          echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
                }
                else
                {
                    $subject = $_POST['sub'];
                    $message = $_POST['msg'];
                    $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender's Email
                    $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                    // Message lines should not exceed 70 characters (PHP rule), so wrap it
                    $message = wordwrap($message, 70);
                    // Send Mail By PHP Mail Function
                    mail("marc.murray.92@gmail.com", $subject, $message, $headers);
                    echo "<script>$('#thankyouModal').modal('show')</script>";
                };
    }
 }
?>

模态的HTML

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Thank you for pre-registering!</h4>
      </div>
      <div class="modal-body">
          <p>Thanks for getting in touch!</p>                     
      </div>    
    </div>
  </div>
</div>

编辑:更新的代码比初始问题更简单.

Answer 1

不要先调用modal show方法,而是首先加载所有资源,然后调用该modal show方法.

echo "<script>
         $(window).load(function(){
             $('#thankyouModal').modal('show');
         });
    </script>";

Answer 2

而不是回应脚本为什么不只是检测您的表单提交与JavaScript,然后显示模式？

就像是

$("form").on('submit', function(){
   $('.modal').show();
})

(如果你正在使用JQuery)