PHP
OOPs
JavaScript
JQuery
Ajax
Codeigniter
Laravel
MySql
Node.js
Tutorials
C
C++
Json
Codeigniter 4
htaccess
wordpress
react.js
Blogs
Fundamental
Python
Search Your Query
×
--- Select Category ---
PHP
OOPs
JavaScript
JQuery
Ajax
Codeigniter
Laravel
MySql
Node.js
Tutorials
Blogs
Fundamental
Python
Most Popular Tutorials
What is Javascript
BOM (Browser object model)
DOM (Document object model)
Variable
Variable is empty or Not
Javascript output
Function
Events
Array
Get text value
Get Form field value
Pattern validation
Form validation
Checkbox validation
Inner Html form validation
Form validation on php server
Window and window location
Get Text Value
get javascript value in php
Date Format
Get php variable in javascript
Redirect page in javascript
Auto Refresh page and DIV
Get text value from dropdown
Clear Browser History
Get Checkbox value
select (Dropdown)
PopUp Contact Form
sidebar contact form
Show modal on page load
Auto calculate price GST
print html and Div content
Calculate Discount prince
Checked single or all checkbox
Auto Fill form data on click checkbox
Show subcategory (Dependent Dropdown)
country, state, city (Dependent Dropdown)
Image upload with preview image
Filter table data
Character Limit Validation
uploading file size validation
Special Character validation
multiple file upload (Add more)
function call after page load
Disable Submit Button After Form Submission
disable browser back button
Remove selected item from second & third dropdown list
Interview Question
Active Tab Menu
String methods
Tutorials Menus
What is Javascript
BOM (Browser object model)
DOM (Document object model)
Variable
Variable is empty or Not
Javascript output
Function
Events
Array
Get text value
Get Form field value
Pattern validation
Form validation
Checkbox validation
Inner Html form validation
Form validation on php server
Window and window location
Get Text Value
get javascript value in php
Date Format
Get php variable in javascript
Redirect page in javascript
Auto Refresh page and DIV
Get text value from dropdown
Clear Browser History
Get Checkbox value
select (Dropdown)
PopUp Contact Form
sidebar contact form
Show modal on page load
Auto calculate price GST
print html and Div content
Calculate Discount prince
Checked single or all checkbox
Auto Fill form data on click checkbox
Show subcategory (Dependent Dropdown)
country, state, city (Dependent Dropdown)
Image upload with preview image
Filter table data
Character Limit Validation
uploading file size validation
Special Character validation
multiple file upload (Add more)
function call after page load
Disable Submit Button After Form Submission
disable browser back button
Remove selected item from second & third dropdown list
Interview Question
Active Tab Menu
String methods
Share On Facebook
How to open popup contact form using javascript?
File name : index.php
<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link href="css/style.css" rel="stylesheet">
<script src="js/my_js.js"></script>
</head>
<!-- Body Starts Here -->
<body id="body" style="overflow:hidden;">
<div id="abc">
<!-- Popup Div Starts Here -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2>Contact Us</h2>
<hr>
<input id="name" name="name" placeholder="Name" type="text">
<input id="email" name="email" placeholder="Email" type="text">
<textarea id="msg" name="message" placeholder="Message"></textarea>
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>
</div>
<!-- Popup Div Ends Here -->
</div>
<!-- Display Popup Button -->
<h1>Click Button To Popup Form Using Javascript</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body Ends Here -->
</html>
my_js.js
File name : my_js.js
// Validating Empty Field
function check_empty() {
if (document.getElementById('name').value == "" || document.getElementById('email').value == "" || document.getElementById('msg').value == "") {
alert("Fill All Fields !");
} else {
document.getElementById('form').submit();
alert("Form Submitted Successfully...");
}
}
//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
style.css
File name : style.css
@CHARSET "ISO-8859-1";
#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family:'Raleway',sans-serif
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#fff
}
p {
margin-top:30px
}
h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
width:82%;
padding:10px;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}
#name {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}
#email {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}
textarea {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:82%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px
}
#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#FFBC00;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}
span {
color:red;
font-weight:700
}
button {
width:10%;
height:45px;
border-radius:3px;
background-color:#cd853f;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer
}
File name : index.php
Share On Facebook
Previous
Next
Trending Tutorials
PHP
100+ Tutorials
PHP OOPs
80+ Tutorial
Codeigniter
100+ Tutorial
Laravel
100+ Tutorials
NODE.JS
100+ Tutorials
Javascript
100+ Tutorials
Download Live Projects
Review & Rating
0.0
/ 5
0
Review
5
(
0
)
4
(
0
)
3
(
0
)
2
(
0
)
1
(
0
)
Write Review Here
Review
Submit Review
×
Submit
Ittutorial
Ittutorial
Most Popular Tutorials
DOM (Document object model)
Checkbox validation
Filter table data
print html and Div content
Checked single or all checkbox
Character Limit Validation
Special Character validation
Date Format
Get Checkbox value
Active Tab Menu
PopUp Contact Form
Disable Submit Button After Form Submission
Interview Question
String methods
Form validation on php server
Get text value
Function
Calculate Discount prince
Window and window location
Inner Html form validation
Important Link
Core php Online Advance Tutorails and video Tutorials.
How to manage Session in php Tutorials.
More .......
upcomming codeigniter and angular js tutorials.
Click here to see More ...
Hello Friend Please Follow & Share Ittutorial.
×
Ittutorial
Please Follow and Share ittutorial.
Ittutorial