发布表格后关闭div

这可能是一个很容易回答的问题，但仍然让我的头脑在jQuery（和jquerytools）中构建函数和位。我设法解析表单并接收来自脚本的电子邮件，但不是显示警告框，我想在关闭div之前显示另一个带有谢谢消息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>

来源

2010-11-20 Vince Pettit

你可以做这样的事情USI纳克了jQuery UI：（假定你将有ID为“消息”一个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>

显示和隐藏（）方法提供了很好的动画。否则，您可以轻松地将div的类更改为可见的东西。

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

脚注2 - 我无法从您的帖子看到“主屏幕”是您网站上的另一个页面还是同一页面的其他配置（即不同的div）。无论哪种方式，将用户发送到“其他地方”的代码都应该在hide（）回调中进行。这可确保在动画完成时运行它。

来源

2010-11-20 16:47:46 shiftycow

，你可以创建一个div和隐藏的HTML，然后你可以使用setTimout和clearTimeout JavaScript来显示这里几秒钟就是一个例子

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

你可以使用像下面还

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

来源

2010-11-20 16:37:37 kobe

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

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

Here is an example

来源

2010-11-20 16:53:34 Zevan

简单好用的一个 – kobe 2010-11-20 17:02:25

发布表格后关闭div

回答

相关问题