Как закрыть модальное окно и вывести другое окно?

Question

[Владислав]

Есть попап с формой и js скрипт для передачи в Php обработчик, нужно закрыть модалку и вывести модалку с благодарностью, помогите допилить js вообще не секу в нем все перепробывал

<div id="popup2" class="popup-overlay">
			<div class="popup">
				<a class="popup-close" href="#close">&times;</a>
				<p class="popup-header">Задайте Ваш вопрос</p>
				<form id="popup-form">
					<input type="hidden" name="Тема" value="Консультация">
					<input name="Имя" id="popup-name" maxlength="20" placeholder="Введите имя" required />
					<input name="Телефон" type="Tel" id="popup-telephone" maxlength="14" placeholder="Введите телефон" required/>
					<textarea name="Сообщение" id="popup-text-area"  rows="6" placeholder="Введите Ваш вопрос" required></textarea>
					<button class="hvr-rectangle-out popup-btn" type="submit">Отправить</button>
				</form>
			</div>
   </div>

<script type="text/javascript">
			$(document).ready(function() {
			$("form").submit(function() {
				$.ajax({
					type: "POST",
					url: "mail.php",
					data: $(this).serialize()
				}).done(function() {
					$(this).find("input").val("");
					$("form").trigger("reset");
				});
				return false;
			});
		});		
		</script>

Comments

[ой всё]

то есть человек только обрадовался, что наконец закрыл вашу модалку, а вы ему хоп! и еще одну
людей не жалко вынуждать кликать на ваши модалки?

Answer 1

[Александр Соболев]

Наверное, самый простой способ сделать в ajax
success: function(response){$('#popup2').html(response.msg);}

А в php обработчик добавить "удачный случай" вроде:
if($result){ $response = array('msg' => 'Конгритулируем, вопрос задан успешно! С Вами обязательно свяжутся.. ну или что-то в этом роде)))');
// ну и echo json response, соответственно
echo json_encode($response);
}

Можно поступить иначе: добавить скрытый div и в том-же success сделать hide() формы и show() div с сообщением
Можно сделать еще красивее)): написать css класс полупрозрачное, например зелененькое с округлым бордюрчиком прилепленное вверх формы сообщение и, в случае успеха кидануть туда result.msg, красиво его показать, подержать секунды 2 и скрыть..
$('popup2').append(''+response.msg+'');
setTimeout(function() { $("#response_msg").hide('1000'); }, 3000);

Удачной импровизации ;) !