<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="mahasakthi harvester spares, combine harvester spares, kartar combine, agricultural harvester spares, standard combine harvester, claas combine harvester, claas dominator 400, kartar 3500g, standard tsc 513, combine harvester rubber track, rubber track, baler spares, round baler, standard harvester spares, harvester spares parts, combine parts, harvester spare parts tamilnadu, claas harvester spares, harvester rubber track, kartar harvester spares"/>
<title>Mahasakthi Harvester Spares</title>
<link rel="icon" type="image/png" href="assets/images/logo.png">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background: url("assets/images/bg.jpg")no-repeat top;
background-size: cover;
background-attachment: fixed;
}
section
{
width: 87%;
margin: 0 auto;
padding: 1em;
margin-top: 4em;
}
section h2{
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
width: 17%;
padding: 1%;
color: #ffffff;
background-color: #fc0321;
margin: 0 auto;
text-shadow:2px 2px 4px #000000;
}
section h3{
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
width: 25%;
padding: 1%;
color: #ffffff;
background-color: #fc0321;
margin-bottom: 0.5em;
text-shadow:2px 2px 4px #000000;
}
iframe{
width:100%;
padding: 1em 0;
}
form input,textarea{
margin-bottom: 0.9em;
}
.form-container{
width: 50%;
float:left;
padding: 1em;
margin-bottom: 3em;
}
.address-container{
width: 50%;
float: right;
margin-bottom: 3em;
}
.address-container p,.form-container p{
text-align:justify;
}
input{
padding: 0.1em;
}
input[type=submit]{
padding: 1.5%;
font-size: 24px;
font-weight: 400;
background-color: orangered;
color: #fff;
border: none;
font-family:'PT Sans Narrow', sans-serif;
}
input[type=submit]:hover{
background-color: #fc0321;
text-shadow:2px 2px 4px #000;
}
textarea{
width: 99%;
}
#popup{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.3);
display: block;
}
#popup div{
position: relative;
top: 50%;
left: 50%;
width: 40%;
padding: 6%;
transform: translate(-50%,-50%);
background-color: #fff;
text-align: center;
}
#popup div i{
font-size: 1.5em;
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
}
#popup div p{
font-size: 2em;
}
@media only screen and (max-width:768px){
section{
width: 100%;
margin-top: 2em;
}
.form-container{
width: 100%;
clear: left;
}
iframe{
width:100%;
margin: 0 auto;
}
.address-container{
float: left;
}
textarea{
width: 90%;
}
section h2{
width: 50%;
}
section h3{
width: 70%;
}
}
</style>
</head>
<body>
<?php require './header.html'; ?>
<section>
<h2>Contact Us</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1954.2639457126445!2d78.74887892394256!3d11.585663866213299!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd01afb36efb4c845!2sMahasakthi+Harvester+Spares!5e0!3m2!1sen!2sus!4v1541082127241" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="form-container">
<h3>Enquire us</h3>
<p><b>Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares. We believe in building strong and lasting relationships with our customers based upon trust and mutual benefit. </b>
</p>
<form method="post" action="">
<input type="text" name="name" required="requied" placeholder="Name *">
<input type="text" name="number" required="required" placeholder="Contact No *">
<input type="email" name="mail" required="required" placeholder="Email *">
<textarea placeholder="Requirement *" name="message" required="required"></textarea>
<input type="submit" name="submit" value="Submit">
</form>
</div>
<div class="address-container">
<h3>Our Shop</h3>
<p><i class="fa fa-address-card" aria-hidden="true"></i> <b>6/380A,Cinthamani Complex,Near Honda Showroom,Mummudi,Thalaivasal,Attur TK,Salem DT,636112.</b></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <b>9443915660 | 9655565540</b></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <b>9655515540</b></p>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <b><a href="mailto:mahasakthi2018@gmail.com">mahasakthi2018@gmail.com</a></b></p>
<h3>Mobile Shop</h3>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <b>9655151540</b></p>
<h3>Shop Hours</h3>
<p><i class="fa fa-clock-o" aria-hidden="true"></i> <b>Monday to Saturday : 9 A.M to 8.30 P.M</b></p>
<p><i class="fa fa-clock-o" aria-hidden="true"></i> <b>Sunday : 9 A.M to 4 P.M</b></p>
</div>
</section>
<?php require './footer.html'; ?>
<?php
if(isset($_POST['submit'])){
$name = $_POST['name'];
$num = $_POST['number'];
$email = $_POST['mail'];
$message = $_POST['message'];
$email_to = "mahasakthi2018@gmail.com";
$email_subject = "Enquiry from Website";
$email_message = "Name: ".$name."\n";
$email_message .= "Email: ".$email."\n";
$email_message .= "Contact No: ".$num."\n";
$email_message .= "Requirement: ".$message."\n";
$headers = 'From: '.$email."\r\n".
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($email_to, $email_subject, $email_message, $headers);
echo '<div id="popup"><div><i onclick="close()" class="fa fa-times" aria-hidden="true"></i><p>Enquiry Received</p><p>We will get back to you shortly</p></div></div>';
}
?>
<script>
function close(){
document.getElementById("popup").style.display = "none";
}
</script>
</body>
</html>
Я пытаюсь использовать модальное всплывающее окно при отправке почтового процесса php. Всплывающее окно отображается, но не закрывается. У меня есть функция javascript, чтобы закрыть модальное окно, но оно не работает. Почему это не так? работает правильно? Может кто-нибудь помочь с этой проблемой JavaScript? Если я сделал какую-либо ошибку с JavaScript, исправьте ошибку, которую я сделал.