Обратный звонок в всплывающем окне

Стили всплывающего окна

.callback{   position:fixed;top:0;left:0;right:0;bottom:0;display:none;width:100%;height:100%;z-index:99999;background:rgba(0,0,0,0.5);} 
.callback .wrapper_callback{  min-width:230px;max-width:450px;margin:100px auto 0;position:relative;background:#fff;padding:15px 0;} 
.callback .wrapper_callback h3{  text-align:center;} 
.callback .wrapper_callback form{  margin:25px auto;width:320px;display:block} 
.callback .wrapper_callback input{  padding:15px;width:300px;outline:0;margin:5px 8px;border:1px solid #ddd;} 
.callback .wrapper_callback input:focus{  border:1px solid #333;} 
.callback .wrapper_callback input[type=submit]{  background:#333;color:#fff;margin-top:15px;cursor:pointer;border:none;} 
.callback input[type=submit]:hover{  background:#000;} 
.callback .wrapper_callback .close{  position:absolute;top:25px;right:25px;font-size:25px;background:none;border:none;color:#ddd;cursor:pointer;font-weight:600;} 
.callback .wrapper_callback .close:hover{  color:#333;}

Код страницы, тут показан пример обратного звонка, то есть по клику открывается окно с возможностью заказа обратного звонка

<button onclick="ShowHide('callback');">Показать / Скрыть</button>
<div id="callback" class="callback">
	<div class="wrapper_callback"> 
		<h3>ЗАКАЗАТЬ ЗВОНОК</h3>
		<button class="close" onclick="ShowHide('callback');">X</button>
		<form action="/callback_mail.php" method="POST">
			<input type="text" name="name" placeholder="Представьтесь" required/>
			<input type="text" name="phone" placeholder="Ваш телефон" required/>
			<input type="submit" value="Отправить"/>
		</form>
	</div>
</div>

Это уже известный скрипт показа / скрытия блока

function ShowHide(id){  
	var nameBlock=document.getElementById(id);
	var styleBlock=getComputedStyle(nameBlock).display;
	nameBlock.style.display=styleBlock==='none'?'block':'none';
}

Файл callback_mail.php, это обработчик формы, для удобства он отправляет еще информацию о странице, с которой была отправлена заявка на звонок. А так же обработчик возвращает результат на страницу с $ _GET['er'] либо ок, либо er, где ok - значит что форма отправлена и er - говорит об обратном

$ to="mail@kakorin.com"; 
$ name=strip_tags($ _POST["name"]);
$ phone=strip_tags($ _POST["phone"]);

$ header="From: \"Заявка с сайта\"  \r\n";
$ header.='Content-type: text/html; charset="utf-8"';
$ subject="Заявка с сайта";

$ content="
	<!DOCTYPE html>
	<html>
		<body>
			Имя: ".$ name." 
			<br> 
			Телефон: ".$ phone."
			<br>
			Cо страницы ".$ _SERVER[HTTP_REFERER]."
		</body>
	</html>
";

if($ name!=null and $ phone!=null){  
	mail($ to,$ subject,$ content,$ header);
	header("location:".$ _SERVER['HTTP_REFERER']."?er=ok");
} else{  
	header("location:".$ _SERVER['HTTP_REFERER']."?er=er");
}

Пример: пример

Обратный звонок в всплывающем окне

Другие статьи