Как добавить всплывающее окно?

Question

[Ghost_Bear]

Здравствуйте!
Есть форма обратного звонка. Нужно, чтобы при заполнении формы и нажатии на кнопку "Оформить заказ", всплывало окно с надписью "Ваш заказ принят".

<form enctype="multipart/form-data" class="cform akciya form_1" id="cforms2form">
    <ol class="cf-ol">
        <li id="li-2-1" class="">
            <label for="cf2_field_1"><span>Введите Ваше имя</span>
            </label>
            <input type="text" name="name" id="cf2_field_1" class="single input_name input_clear" placeholder="Введите Ваше имя" />
        </li>
        <li id="li-2-2" class="">
            <label for="cf2_field_2"><span></span>
            </label>
            <input type="text" name="phone" id="cf2_field_2" class="single fldrequired input_phone input_clear"  placeholder="Введите Ваш телефон" />
        </li>
    </ol>
    
    <p class="cf-sb">
        <input type="submit" name="sendbutton2" id="sendbutton2" class="sendbutton" value="Оставить заявку" />
    </p>
</form>

<?php

	include '../config.php';

	$status = '';
	$message = '';
	
	$name = strip_tags($_POST['name']);
	$phone = strip_tags($_POST['phone']);
  	
	$to = $Page_config['email_to'];
	$from = $Page_config['email_from'];
	
	$subject = 'Письмо на заказ двери!';
	$send_mess = 'Имя : '.$name.'<br/>Телефон : '.$phone ;
	
	
	$send_mess = wordwrap($send_mess, 70, "\r\n"); 
	

	$headers  = 'MIME-Version: 1.0' . "\r\n";
	$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
	$headers .= 'From: '. $from . "\r\n" .
				'Reply-To: ' . $from . "\r\n" .
				'X-Mailer: PHP/' . phpversion();

	if (mail($to, $subject, $send_mess, $headers)) 
	{ 
		$status = 'ok'; 
	} 
	else 
	{
		$status = 'error';
		$message = 'Извините. Внутренняя ошибка';
	} 
	


$response['status'] = $status;
$response['message'] = $message;
echo json_encode($response);

?>

Файл config.php :

<?php

$Page_config = array(
	'email_to'=>'Email',

	'email_from'=>'Email',
);

$(document).ready(function()
{
	
    $('.form_1').submit(function()
    { 
	  	 
		var flags_1 = true;
		var flags_2 = true;
 		
	
		if ($(this).find('.input_name').val() == '')
		{
			flags_1 = false;
			$(this).find('.input_name').css('border','2px solid #f05340');	
		}
		else
		{
			flags_1 = true;
			$(this).find('.input_name').css('border','2px solid #e5e5e5');	
		}
		/*------------*/
		
		
		if ($(this).find('.input_phone').val() == '')
		{
			flags_2 = false;
			$(this).find('.input_phone').css('border','2px solid #f05340');	
		}
		else
		{
			flags_2 = true;
			$(this).find('.input_phone').css('border','2px solid #e5e5e5');	
		}
		/*------------*/
	
 	
	
		if (flags_1 && flags_2  )
		{
			var form = $(this);
			var data = form.serialize();
			
			$.ajax({
				url: 'ajax/model_ajax_1.php',
				type: 'POST',
				dataType: 'JSON',
				data: data,
				method:'POST',
				success: function(data)
				{
				   if (data['status'] == 'ok')
					{
						$('.input_clear').val('');
						//$('.modal_form').css('visibility','collapse');
						 
						 
						$('.reveal-modal-bg').fadeIn(300);
						$('#modal_ok').fadeIn(300);
						
						this.handler = setTimeout(function () {
							$('.reveal-modal-bg').fadeOut(300);
							$('#modal_ok').fadeOut(300);
						}, 3000);
				
					}
					
				   //else alert(data['message']);
				}
			})
		}
	return false; 
    });
	
	
 	
	
    $('.form_2').submit(function()
    { 
	  	 
		var flags_1 = true;
		var flags_2 = true;
 		
	
		if ($(this).find('.input_name').val() == '')
		{
			flags_1 = false;
			$(this).find('.input_name').css('border','2px solid #f05340');	
		}
		else
		{
			flags_1 = true;
			$(this).find('.input_name').css('border','2px solid #e5e5e5');	
		}
		/*------------*/
		
		
		if ($(this).find('.input_phone').val() == '')
		{
			flags_2 = false;
			$(this).find('.input_phone').css('border','2px solid #f05340');	
		}
		else
		{
			flags_2 = true;
			$(this).find('.input_phone').css('border','2px solid #e5e5e5');	
		}
		/*------------*/
	
 	
	
		if (flags_1 && flags_2  )
		{
			var form = $(this);
			var data = form.serialize();
			
			$.ajax({
				url: 'ajax/model_ajax_1.php',
				type: 'POST',
				dataType: 'JSON',
				data: data,
				method:'POST',
				success: function(data)
				{
				   if (data['status'] == 'ok')
					{
						$('.input_clear').val('');
						$('#myModal').modal('hide');
						 
						$('.reveal-modal-bg').fadeIn(300);
						$('#modal_ok').fadeIn(300);
						
						this.handler = setTimeout(function () {
							$('.reveal-modal-bg').fadeOut(300);
							$('#modal_ok').fadeOut(300);
						}, 3000);
				
					}
					
				   //else alert(data['message']);
				}
			})
		}
	return false; 
    });
});

Comments

[HamSter]

дк js нужен

[Ghost_Bear]

HamSter отредактировал

Answer 1

[Максим Тимофеев]

Судя по данному коду у Вас уже есть это в контейнере #modal_ok .

if (flags_1 && flags_2  )
    {
      var form = $(this);
      var data = form.serialize();
      
      $.ajax({
        url: 'ajax/model_ajax_1.php',
        type: 'POST',
        dataType: 'JSON',
        data: data,
        method:'POST',
        success: function(data)
        {
           if (data['status'] == 'ok')
          {
            $('.input_clear').val('');
            //$('.modal_form').css('visibility','collapse');
             
             
            $('.reveal-modal-bg').fadeIn(300);
            $('#modal_ok').fadeIn(300);
            
            this.handler = setTimeout(function () {
              $('.reveal-modal-bg').fadeOut(300);
              $('#modal_ok').fadeOut(300);
            }, 3000);
        
          }
          
           //else alert(data['message']);
        }
      })
    }
  return false; 
    });

Если не работает - надо разбираться, смотреть ошибки в консоле.
Или если плохо, то можно после
$('#modal_ok').fadeIn(300);
добавить
alert("Форма отправлена, живите пока");

Comments

[Ghost_Bear]

Спасибо Вам. Так работает :)