Schließen Sie ein div nach dem Ausfüllen des Formulars

Question

Dies ist wahrscheinlich eine sehr einfache zu beantworten, aber immer noch meinen Kopf rund um Strukturierung von Funktionen und Bits in jQuery (und jquerytools). Ich habe es geschafft, das Formular zu parsen und eine E-Mail vom Skript zu erhalten, aber anstatt eine Warnmeldung anzuzeigen, möchte ich ein kleines kleines div mit einer Dankesnachricht für X Sekunden anzeigen, bevor es die Divs schließt, das Formular löscht und geht zurück auf die Hauptseite.

Hier ist der Code, den ich laufen:

<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

verwenden Sie so etwas wie dieses usi tun könnte ng der jQuery UI: (Es wird angenommen, dass Sie eine div mit der ID „Meldung“ haben würde, wo die Sie danken Nachricht platziert werden würde)

<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> 

Die Show() und hide() Methoden bieten schöne Animationen. Ansonsten könntest du genauso gut die Klasse des div in etwas ändern, das sichtbar ist.

Fußnote 1 - Sie könnten in Erwägung ziehen, die Rückgabedaten von der AJAX-Anforderung zu übernehmen und sie zu verwenden, um die Nachricht im Falle von Fehlern zu füllen.

Fußnote 2 - Ich konnte nicht aus Ihrer Post sagen, ob der "Home-Bildschirm" eine andere Seite auf Ihrer Website oder eine andere Konfiguration (d. H. Verschiedene Divs) der gleichen Seite war. In beiden Fällen sollte der Code zum Senden des Benutzers "woanders" in den hide() - Callback gehen. Dies stellt sicher, dass es ausgeführt wird, wenn die Animation beendet ist.

Answer 2

Sie ein div in den HTML-Code erstellen und verstecken und dann können Sie setTimout und clear von Javascript verwenden für einige Sekunden hier zu zeigen ist ein Beispiel

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

können Sie wie

unten auch

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

Answer 3

können Sie jquery Verzögerung und fadeIn()/fadeOut() verwenden. Wie folgt aus:

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

Here is an example