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

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

.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");
}

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

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

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