Окошко 

HTML код:
<a id="mycallbackwin" onclick="winOpen();">Обратный звонок</a>
<div id="divWin">
<div id="closetButton" onclick="winCloset();">Х</div>
      контент окошка
</div>


Стили: 
#divWin {

position:absolute; 
width:341px; 
height:370px; 
border:1px solid #999; 
background:white; 
visibility:hidden; 
padding-left:15px; 
z-index:1;
}

#closetButton {
position:absolute; 
top:0; 
right:0;  
cursor:pointer; 
padding:5px 10px
}

#mycallbackwin {
cursor:pointer
}


Скрипт:

<script type="text/javascript">
function winOpen(){
var obj=document.getElementById("divWin").style;
obj.visibility="visible";
winOpen2(3, 0, obj);
 };
 
function winOpen2(s, o, obj){
o+=s;
if(o<100){
obj.opacity=o/100;
obj.filter='alpha(opacity='+o+')';
setTimeout(function(){winOpen2(s, o, obj);}, 15);}
else{
obj.opacity=1;
obj.filter='alpha(opacity=100)';};
 };
 
function winCloset(){
winCloset2(5, 10, document.getElementById("divWin").style);
 };
 
function winCloset2(s, o, obj){
o-=s;
if(o>0){
obj.opacity=o/100;
obj.filter='alpha(opacity='+o+')';
setTimeout(function(){winCloset2(s, o, obj);}, 15);}
else{
obj.opacity=0;
obj.filter='alpha(opacity=0)';
obj.visibility="hidden";};
 };
</script>








Форма и логика

Скрипт:

 <script type="text/javascript">
function validateEmail(email) { 
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
} 
$(document).ready(function(){
     var modCallMeBack = $(".form");
    /* CallMeBack */
    $("#fast-call_submit", modCallMeBack).bind("click",function(e){
        e.preventDefault();

        var is_error = false;

        // проверка на дефолт
        $("input.required", modCallMeBack).each( function(){
          if(this.value==this.defaultValue){
            is_error = true;
            $(this).css("background","rgba(255, 0, 0, 0.2)");
          }
          else
          {
          $(this).css("background","#fff");
          }
        });
        if  (validateEmail($('#maill').val())) {
                 $('#maill').css("background","#fff");    
        }       
        else
        {
        $('#maill').css("background","rgba(255, 0, 0, 0.2)");   
         is_error = true;
                                               }
        if(is_error == true) {
          $('.form .errors').html('Не все поля заполнены правильно!');
          return
        }

      
      
        var form = $('#feedback_form',modCallMeBack);
        var fields = form.serialize();
        $.ajax({
            url:      form.attr('action') + '.json',
            type:     'post',
            data:     fields,
            dataType: 'json',
            complete: function() { },
            success:  function(response) {
                if ( response.status == 'ok' ) {
                                        $('.form .errors').html('Сообщение отправлено!');
              
                } else {
                    $('.form .errors').html('Ошибка!');
                }
            }
        });
    });
});
</script>

HTML код:
<div class="form">
 <form id="feedback_form" class="contact" action="/client_account/feedback" method="post" role="form">
                            <h3>Заказать обратный звонок</h3>
                                                        
                            <div>
                              <label>Ваше имя:</label>
                                <input type="text" name="feedback[name]" class="required" value="" placeholder="Имя">
                            </div>
                                
                            <div class="email" >
                                <input id="maill" type="hidden" name="feedback[from]" value="test@test.ru" placeholder="E-mail">
                            </div>
                                                        
                            <div>
                              <label>Ваш телефон:</label>
                                <input type="text"  name="feedback[phone]" class="required" placeholder="Телефон" value="">
                            </div>
                                
                            <div>
                               <label>Ваш комментарий:</label>
                                <textarea name="feedback[content]">{% if template == 'product' %}Перезвоните мне на счет товара {{ product.title }}  {% else %} Перезвоните мне{% endif %}</textarea>
                            </div>
                               
                            <div class="submit">
                  <a href="#" class="button" onclick="document.getElementById('fast-call_submit').click(); return false;">Отправить</a>
                                <input type="hidden" id="fast-call_submit" value="Отправить">
                            </div><!-- .submit -->
                           <div class="errorcont"><i class="errors"></i></div>
              
                    </form>
					</div>
					
Стили:

#feedback_form input {

border:1px solid #888;
  margin-bottom:20px;
    height: 20px;
    padding-left: 12px;
}


#feedback_form label {

font-size:14px;
font-style:normal;
  display:block;
  

}

#feedback_form textarea {

font-size:14px;
font-style:normal;
    border:1px solid #888;
height:90px;
  width: 320px;
  line-height: 18px;
  padding:2px;
  margin-bottom:15px;
}

.errorcont {
margin-top:5px;

}