<div class="open_modal"><p>Форма обратной связи</p></div>

    <div class="overlay"></div>
    <div class="popup"><br><br><br><br><br><br>
        <div class="close_modal">x</div>
        <form class="fofm" action="">
            
            <input type="text" required="" placeholder="Имя" name="txtname">
            <input type="email" placeholder="Email" name="txtemail">
            <input type="tel" pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$" required="" placeholder="Телефон" name="txtphone">
            <textarea name="txtmessage" placeholder="Описание" rows="25"></textarea>
            <label><input type="checkbox">Я не робот</label>
            <input type="hidden" name="valTrFal" class="valTrFal" value="valTrFal_disabled">
          <input type="submit" class="button" value="Отправить" disabled="disabled" name="btnsend">
        </form>
    </div>

jQuery(document).ready(function($){

   //в этой функции отслеживается изменение чекбокса "я не робот"
   $(document).on('change', '.fofm input:checkbox', function() {
      if($(this).is(':checked')){
         $(".fofm input[type=submit]").removeAttr('disabled');
         $('.fofm input[type=hidden].valTrFal').val('valTrFal_true');
      }
      else {
         $(".fofm input[type=submit]").attr('disabled','disabled');
         $('.fofm input[type=hidden].valTrFal').val('valTrFal_disabled');
      }
   });

   //закрытие модального окна
   $('.close_modal, .overlay').click(function (){
      $('.popup, .popup2, .overlay').css({'opacity':'0', 'visibility':'hidden'});
      $('.popup > .fofm textarea').val('');
      //сброс всех полей формы обраной связи
      $(':input','.fofm').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
      $(".fofm input[type=submit]").attr('disabled','disabled');
   });

   
//показ модального окна
   $('.open_modal').click(function (e){
      e.preventDefault();
      $('.popup, .overlay').css({'opacity':'1', 'visibility':'visible'});
   });


   //аякс форма обратной связи
   //проверяет какой ответ был получен
   //и в зависимости от ответа
   //выводит информацию о статусе
   //отправки письма
   $(".fofm").submit(function() {
      var str = $(this).serialize();
      $.ajax({
         type: "POST",
         url: "contact.php",
         data: str,
         success: function(msg) {
            if(msg == 'ok') {
               $('.popup2, .overlay').css('opacity','1');
               $('.popup2, .overlay').css('visibility','visible');
               $('.popup').css({'opacity':'0','visibility':'hidden'});
            }
            else {
               $('.popup2 .window').html('<h5>Ошибка</h5><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>');
               $('.popup2, .overlay').css('opacity','1');
               $('.popup2, .overlay').css('visibility','visible');
               $('.popup').css({'opacity':'0','visibility':'hidden'});
            }
         }
      });
      return false;
   });

});