Стили всплывающего окна
.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");
}
Пример: пример