Question

这可能是一个非常容易回答的问题，但仍然可以在jQuery（和jquerytools）中构建函数和位。我已经设法解析了表单并从脚本接收了一封电子邮件，但我没有显示一个警告框，而是希望在关闭div之前显示另一个带有感谢信息的小div，持续X秒，清除表单和回到主页。

这是我正在运行的代码：

<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

你可以创建一个div并隐藏在html中然后你可以使用setTimout和clearTimeout的javascript来显示几秒钟这里是一个例子

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

您也可以使用以下

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

Answer 2

你可以使用jQuery UI做这样的事情：（假设您将有一个id为“message”的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 3

你可以使用jquery延迟和fadeIn（）/ fadeOut（）。像这样：

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

Here is an example

发布表单后关闭div

3 个答案: