Question

我有一个弹出窗口的表单，可以进行简单的回调，但试图让它正常运行。

我想要的是它在叠加层关闭并淡出之前显示一个小的谢谢（很快跟你说）消息。

我有点工作，但没有延迟，叠加也不淡出。

以下是代码：

<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("Speak to you soon!"); //see footnote 
            jQuery("#callback").hide("blind",null, 10000,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 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">0844 8707026</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 /><div id="message"></div>
  <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

你真的有很多地方出错：

这是一个大致按照你的要求做出的例子：http://jsfiddle.net/5Ybdb/10/

请参阅jQuery.hide的manual，您使用的语法错误
请参阅ajaxForm的manual，您使用了错误的语法
确保您正确导入上述两个插件'js文件
您的消息div位于#callback div内，因此它会立即与此
您的div /表格标签无法按正确的顺序打开/关闭（HTML语法不正确）
要设置窗口位置，请使用window.location =“blah”（使用window.location（“blah”）

jQuery延迟问题

1 个答案: