发布表单后关闭div

Question

这可能是一个非常容易回答的问题，但我仍然对jQuery (和jquerytools)中的函数和位进行了结构化处理。我已经成功地解析了表单并从脚本中接收到一封电子邮件，但我不想显示警告框，而是希望在X秒内显示另一个带有感谢消息的小div，然后关闭div，清除表单并返回主页。

下面是我正在运行的代码：

<script> 
jQuery(document).ready(function() {
  jQuery ("a[rel]").overlay({mask: {color: '#000', loadSpeed: 200,opacity: 0.5}, top: '25%',} );
            jQuery('#form').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 

});
</script>

<div class="home-block">
  <div class="home-block-content">
    <div class="home-block-col1">
      <h2>call us</h2>
      why not call our friendly designers or let us call you... <span class="callus">0845 6808107</span><br>
      <a href="#" rel="#callback" class="simpledialog">request a call back</a></div>
    <div class="home-block-col2"><a href="#" rel="#callback" class="simpledialog"><img src="{{skin url=""}}images/media/callus.png" border="0" alt="call us"  /></a></div>
  </div>
  <div class="clear-block"><br>
  </div>
</div>
<div class="simple_overlay" id="callback"> Please enter your details and we will call you back...<br />
  <br />
  <form id="form" name="form" method="post" action="{{skin url=""}}forms/callbackscript.php">
    <div class="callback-label">Name:</div>
    <div class="callback-field">
    <input name="name" type="text" size="25" class="callback-input"></div><div class="clear-block"></div>
    <div class="callback-label">Phone Number:</div>
    <div class="callback-field">
    <input name="phone" type="text" size="25" class="callback-input"></div><div class="clear-block"></div>
    <div class="callback-label">Callback time*:</div>
    <div class="callback-field">
    <select name="howsoon" class="callback-select">
    <option value="ASAP">As soon as possible</option>
    <option value="AM">AM</option>
    <option value="PM">PM</option>
    </select></div><div class="clear-block"></div>
    <div class="callback-label">Your Question:</div>
    <div class="callback-field">
      <textarea name="question" cols="27" rows="3" class="callback-input"></textarea><div class="clear-block"></div>
    </div>
<div class="callback-label"></div><div class="callback-field">
<input type="submit" name="Submit" value="Submit" />
  </form></div><div class="clear-block"></div>
<div class="note">*Please note we can only call back between the hours of 8-5 Monday-Friday and 9-1 on Saturday</div>
<div class="clear-block"></div>
</div>

Answer 1

您可以使用message UI来做类似这样的事情：(假设您有一个id为“jQuery”的div，其中将放置致谢消息)

<script> 
    jQuery(document).ready(function() {
        jQuery ("a[rel]").overlay({mask: {color: '#000', loadSpeed: 200,opacity: 0.5}, top: '25%',} );
        jQuery('#form').ajaxForm(function() { 
            jQuery("#message").html("Thank you for your comment!"); //see footnote 
            jQuery("#message").show("blind",null, 1000,function(){
                setTimeout(close_message,10000);
            });
        }); 
    });

    function close_message() {
        jQuery('#message').hide("blind",null,1000,function(){
           window.location("<url to the home page>");//see footnote 2
         });
    }
</script>

show()和hide()方法提供了很好的动画效果。否则，您可以很容易地将div的类更改为可见的内容。

脚注1-您可能希望考虑从AJAX请求中获取返回数据，并使用它来填充消息，以防出现错误。

脚注2-我不能从你的帖子中看出“主页”是你网站上的另一个页面，还是同一个页面的另一个配置(即不同的div)。无论哪种方式，将用户发送到“别处”的代码都应该放在hide()回调中。这可确保在动画结束时运行该程序。

Answer 2

您可以创建一个div并隐藏在html中，然后您可以使用javascript的setTimout和clearTimeout来显示几秒钟

http://www.electrictoolbox.com/using-settimeout-javascript/

你也可以像下面这样使用

setTimeout(function() { $('#divID').fadeOut(); }, 5000);

Answer 3

您可以使用jquery delay和fadeIn()/fadeOut()。如下所示：

// fade in, wait two seconds and fade out
$("#myDiv").fadeIn().delay(2000).fadeOut();

Here is an example