<!doctype html>
<html><head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="postzak.js"></script>
<script type="text/javascript" src="postsob.js"></script>
<style>
.modal {opacity: 0; background: #D7BEBE; width: 300px; height: auto; }
.modal:target {opacity: 1;}
.modalmsg { width: 300px;height:auto;}
.modalzag { width: 300px; height: auto;}
</style>
</head>
<body>
<article>
<div id="openModal" class="modal"> <a href="#close"><img src="img/close.png" alt="close"></a>
<script type="text/javascript" src="close.js"></script>
<h3> Первое модальное окно для таблицы</h3>
<table>
<tr><td>Таблица</td></tr>
</table>
</div>
<br>
<div id="soobModal" class="modal"> <a href="#close2"><img src="img/close.png" alt="close"></a>
<script type="text/javascript" src="close.js"></script>
<div class="modalmsg">
<form id="contact" name="contact" action="#" method="post">
<br>
<input type="text" id="name" name="name" />
<br>
<input type="text" id="email" name="email" />
Сообщение <br>
<input type="text" id="tel" name="tel" />
<br>
<button id="send">ОТПРАВИТЬ</button>
<button type="reset">Очистить</button>
</form>
</div>
</div>
<br>
<br>
<div id="zakazbModal" class="modal"> <a href="#close1"><img src="img/close.png" alt="close"></a>
<script type="text/javascript" src="close.js"></script>
<div class="modalmsg">
<form id="zagol" name="zagol" action="#" method="post">
<br>
<input type="text" id="name2" name="name2" />
<br>
<input type="text" id="email2" name="email2" />
Заказ <br>
<input type="text" id="tel2" name="tel2" />
<br>
<h3>Способ получения</h3>
<input name="radiobutton" type="radio" value="Delivery" class="vbr">
<strong class="strong1">Автомобилем</strong>
<input name="radiobutton" type="radio" value="Pickup" class="vbr">
<strong class="strong1">Самовывоз</strong>
<button id="sendz" >Отправить</button>
<button type="reset" >очистить</button>
</form>
</div>
</div>
<a href="#openModal"><p>Первое модальное окно таблицы</p></a><br>
<a href="#soobModal">Второе модального для обратной связи</a><br>
<a href="#zakazbModal">Третье модальное окно для заказа</a>
</article>
</body>
</html>document.querySelector('[href="#close2"]').onclick = function(){
document.getElementById("contact").reset();
}
document.querySelector('[href="#close1"]').onclick = function(){
document.getElementById("zagol").reset();
}$("#zakaz").submit(function() { return false; });
$.ajax({
type: 'POST',
url: 'zakazmessage.php',
data: $("#zakaz").serialize(),
success: function(data) {
$('#zakaz').find('input[type=text],input[type=email],input[type=tel], textarea').val('');
$('#zakaz').find("input[type=checkbox], input[type=radio]").prop("checked", "");
}
});<?php
$sendto = "mail@mail.ru";
$name = $_POST['name1z'];
// Выбор типа доставки
$radio=$_POST['radiobutton'];
if ($radio==="Delivery");
if ($radio==="Pickup");
// Формирование заголовка письма
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
// Формирование номера заказа
$Nzakaz = rand(10000, 99999);
$subject = "Заказ";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
// Формирование тела письма
$msg = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h3 style='font-weight:bold; color:#D41114; border:1px solid #DF1518;'>Номер:".$Nzakaz."</h3>\r\n";
$msg .= "<p><strong>Имя Заказчика:</strong> ".$name."</p>\r\n";
$msg .= "<p><strong>Способ доставки:</strong> ".$radio."</p>\r\n";
$msg .= "</body></html>";
// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}
?>
// отправка сообщения
mail($sendto, $subject, $msg, $headers);
// отдать js скрипту номер заказа
echo $Nzakaz;success: function(data) {
$('#zakaz').find('input[type=text],input[type=email],input[type=tel], textarea').val('');
$('#zakaz').find("input[type=checkbox], input[type=radio]").prop("checked", "");
console.log(data); // в переменной data и будет ваш номер, далее передавайте его как хотите, например так:
$('#zakazbModal').html(data);
}<!doctype html>
<html><head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="postzak.js"></script>
<style>
.modal1 {opacity: 0;350px; height: auto; position: absolute; left: 100px; top: 100px;}
.modal1:target {opacity: 1;}
</style>
</head>
<body>
<article>
<div id="zakazbModal" class="modal1"> <a href="#close1"><img src="img/close.png" alt="close"></a>
<script>
document.querySelector('[href="#close1"]').onclick = function(){
document.getElementById("zakaz").reset();
}
</script>
<form id="zakaz" name="zakaz" action="#" method="post">
<h3>Оформление заказа<i class="fas fa-cart-arrow-down"></i></h3>
<strong class="strong2">Имя</strong><br>
<input type="text" id="name1z" name="name1z" />
<br>
<strong class="strong2">Почта</strong><br>
<input type="email" id="email1z" name="email1z"/>
<br>
<strong class="strong2">Телефон</strong><br>
<input type="tel" id="tel1z" name="tel1z" /><br>
<strong>Примечание</strong> <br>
<textarea id="msg1z" name="msg1z" placeholder="Примечание."></textarea><br>
<button id="sendz" class="sendknop"><i class="fab fa-telegram-plane"></i> Отправить</button>
<button type="reset" value="Очистить" class="sendknop" >очистить</button>
</form>
</div>
<a href="#zakazbModal">Оформление заказа</a> </article>
</body>
</html>$.ajax({
type: 'POST',
url: 'zakazmessage.php',
data: $("#zakaz").serialize(),
success: function(data) {
$('#zakaz').find('input[type=text],input[type=tel],input[type=email], textarea').val('');
$('#zakaz').find("input[type=checkbox], input[type=radio]").prop("checked", "");
console.log(data); // в переменной data и будет ваш номер, далее передавайте его как хотите, например так:
$('#zakazbModal').html(data);
}
});<?php
$sendto = "my_mail@yandex.ru";
// Координаты
$name = $_POST['name1z'];
$tel = $_POST['tel1z'];
$usermail = $_POST['email1z'];
$content = nl2br($_POST['msg1z']);
// Формирование заголовка письма
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$Nzakaz = rand(10000, 99999);
// Формирование заголовка письма номер заказа и дата
$sub="Номер";
$subject = $sub;
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
// Формирование тела письма
//$msg .= "<p><strong>Получение:Дата</strong> ".$datvid. "<strong> Время:</strong> ".$timvid."</p>\r\n";
$msg = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h3 style='font-weight:bold;border-bottom:1px inset #05AC51;'>Заявка</h3>\r\n";
$msg .= "<h3 style='font-weight:bold; color:#D41114; border:1px solid #DF1518;'>Номер:".$Nzakaz."</h3>\r\n";
$msg .= "<p><strong>Имя:</strong> ".$name."</p>\r\n";
$msg .= "<p><strong>Телефон</strong> ".$tel."</p>\r\n";
$msg .= "<p><strong>Почта</strong> ".$usermail."</p>\r\n";
$msg .= "<p>".$content."</p>\r\n";
$msg .= "</body></html>";
// отправка сообщения
mail($sendto, $subject, $msg, $headers);
// отдать js скрипту номер заказа
echo $Nzakaz;
?>
Средний
Простой