Question

我试图在用户成功提交联系表单时弹出模态，并在表单不成功时弹出替代模式。可以通过单击“联系我”来测试模式。

基本上只是一个简单的弹出窗口，它比警告框更漂亮，告诉用户他们已正确发送。

我用于表单提交的PHP如下：

<?php

/*subject and email variables*/

$emailSubject = 'Subject';
$webMaster = 'michaelgriffin87@me.com';

/*gathering data variables*/

$nameField = $_POST['Name'];
$emailField = $_POST['E-mail'];
$commentField = $_POST['Comment'];


$to = "$webMaster";
$subject = "$emailSubject";
$message = "<html>
<head></head>
<body>
<strong>Website Contact Form</strong><br />
<br />
Customer's Name: <strong>$nameField</strong><br />
E-mail Address: <strong>$emailField</strong><br />
Message:<br /><strong>$commentField</strong>



</body>
</html>
";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "To: Amorae Bridal <$webMaster>" . "\r\n";
$headers .= 'From: Website Contact Form <'.$email.'>' . "\r\n";

mail($to, $subject, $message, $headers); //<-- function to send email

$theResults = <<<EOD

EOD;
echo "$theResults";
?>

Modal的Page Jquery / HTML如下：

<div id="contact-sent" class="reveal-modal">

  <h1>sent</h1>

<a href="#" class="close-reveal-modal"><img src="img/close.png" alt="Close button"></a>
</div><!--modal-->

</div><!--end-of-container-->
<script src="js/main.js"></script>

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.reveal.js"></script>
<script>
 //code that uses 1.4.4 should be enclosed as follows
 jQuery(function( $ ) {

    (jquery);

 $('#contact-sent').reveal({
 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
 animationspeed: 300,                       //how fast animtions are
 closeonbackgroundclick: true,              //if you click background will modal close?
 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an      open modal
});
});

</script>

显示模式以在表单提交时触发

0 个答案: