problem with popup modal in javascript not working
0
<!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."rn".
'Reply-To: '.$email."rn" .
'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>
I am trying to have the popup modal when the php mail process is sent.The popup window is displaying but it is not closing.I have the javascript function to close the popup modal but it is not working.Why it is not working properly?Can anyone help with this javascript problem?If I made any any mistake with the javascript,correct the mistake I did.
javascript html5 popupwindow
asked Nov 12 at 6:41
Anandh
116
add a comment |
0
<!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."rn".
'Reply-To: '.$email."rn" .
'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>
I am trying to have the popup modal when the php mail process is sent.The popup window is displaying but it is not closing.I have the javascript function to close the popup modal but it is not working.Why it is not working properly?Can anyone help with this javascript problem?If I made any any mistake with the javascript,correct the mistake I did.
javascript html5 popupwindow
asked Nov 12 at 6:41
Anandh
116
do you want to close modal on click of your icon or automatically?
– Rahul Dudharejiya
Nov 12 at 6:47
If your question is not related to PHP, why does it have PHP code? The PHP is not helpful as it prevents us from fiddling with your code.
– connexo
Nov 12 at 6:48
yes I want to close the modal on click of the icon
– Anandh
Nov 12 at 6:48
add a comment |
0
0
0
<!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."rn".
'Reply-To: '.$email."rn" .
'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>
I am trying to have the popup modal when the php mail process is sent.The popup window is displaying but it is not closing.I have the javascript function to close the popup modal but it is not working.Why it is not working properly?Can anyone help with this javascript problem?If I made any any mistake with the javascript,correct the mistake I did.
javascript html5 popupwindow
asked Nov 12 at 6:41
Anandh
116
<!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."rn".
'Reply-To: '.$email."rn" .
'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>
I am trying to have the popup modal when the php mail process is sent.The popup window is displaying but it is not closing.I have the javascript function to close the popup modal but it is not working.Why it is not working properly?Can anyone help with this javascript problem?If I made any any mistake with the javascript,correct the mistake I did.
javascript html5 popupwindow
javascript html5 popupwindow
asked Nov 12 at 6:41
Anandh
116
asked Nov 12 at 6:41
Anandh
116
asked Nov 12 at 6:41
Anandh
116
asked Nov 12 at 6:41
Anandh
116
asked Nov 12 at 6:41
Anandh
116
116
do you want to close modal on click of your icon or automatically?
– Rahul Dudharejiya
Nov 12 at 6:47
If your question is not related to PHP, why does it have PHP code? The PHP is not helpful as it prevents us from fiddling with your code.
– connexo
Nov 12 at 6:48
yes I want to close the modal on click of the icon
– Anandh
Nov 12 at 6:48
add a comment |
do you want to close modal on click of your icon or automatically?
– Rahul Dudharejiya
Nov 12 at 6:47
If your question is not related to PHP, why does it have PHP code? The PHP is not helpful as it prevents us from fiddling with your code.
– connexo
Nov 12 at 6:48
yes I want to close the modal on click of the icon
– Anandh
Nov 12 at 6:48
do you want to close modal on click of your icon or automatically?
– Rahul Dudharejiya
Nov 12 at 6:47
do you want to close modal on click of your icon or automatically?
– Rahul Dudharejiya
Nov 12 at 6:47
If your question is not related to PHP, why does it have PHP code? The PHP is not helpful as it prevents us from fiddling with your code.
– connexo
Nov 12 at 6:48
If your question is not related to PHP, why does it have PHP code? The PHP is not helpful as it prevents us from fiddling with your code.
– connexo
Nov 12 at 6:48
yes I want to close the modal on click of the icon
– Anandh
Nov 12 at 6:48
yes I want to close the modal on click of the icon
– Anandh
Nov 12 at 6:48
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257044%2fproblem-with-popup-modal-in-javascript-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257044%2fproblem-with-popup-modal-in-javascript-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
do you want to close modal on click of your icon or automatically?
– Rahul Dudharejiya
Nov 12 at 6:47
If your question is not related to PHP, why does it have PHP code? The PHP is not helpful as it prevents us from fiddling with your code.
– connexo
Nov 12 at 6:48
yes I want to close the modal on click of the icon
– Anandh
Nov 12 at 6:48