模态重置和隐藏

时间:2014-08-04 18:03:55

标签: javascript jquery twitter-bootstrap twitter-bootstrap-3

这是我的模态布局:

<div class="modal fade" id="myContact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
  <div class="modal-content">
    <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Send me a message</h3>
    <div id="thanks"></div>
</div>
    <div class="modal-body">
    <form class="contact" name="contact">

        <input type="text" name="name" class="form-control" placeholder="Your Name"><br>

        <input type="email" name="email" class="form-control" placeholder="Your E-mail"><br>


        <textarea name="message" class="form-control" placeholder="Enter a Message"></textarea>

    </form>

</div>

<div class="modal-footer">
    <input class="btn btn-success" type="submit" value="Send!" id="submit">
    <a href="#" class="btn btn-default" data-dismiss="modal" id="close">Nah.</a>
  </div>
</div>

  

这是Jquery脚本:

 $("input#submit").click(function(){
    $.ajax({
        type: "POST",
        url: "process.php", //process to mail
        data: $('form.contact').serialize(),
        success: function(msg){
            $("#myContact").modal('hide'); //hide popup 
            $("#thanks").html(msg) //hide button and show thank you  



        },
        error: function(){
            alert("failure");
        }
    });
});

PHP process.php:

<?php
//add the recipient's address here
$myemail = 'test@mail.com';

//grab named inputs from html then post to #thanks
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<class=\"alert alert-success\" >Your message has been !";

//generate email and send!
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}
?>

首先,大家好,我是新来的.... 我有一个问题..当我按下发送我的模态以隐藏(但是看到警报成功消息的白色延迟)并重置时,我该怎么办...

现在正在工作并发送我的电子邮件,但没有关闭并重置..

Thx Elod !!

1 个答案:

答案 0 :(得分:0)

成功后,您可以使用reset重置模式中的表单

使用id作为my_Contact

等表单
$('#my_contact').reset(); //to reset the form

延迟模态隐藏可以使用setTimeout

setTimeout(function() { $('#myContact').modal('hide'); }, 3000);