Given below our complete HTML code to create Login and Contact form.
<html>
<head>
<title>jQuery Popup Login and Contact Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery_popup.css" />
<script src="jquery_popup.js"></script>
</head>
<body>
<div id="mainform">
<h2>jQuery Popup Form Example</h2>
<div class="form" id="popup">
<b>1.Onload Popup Login Form</b><br/><hr/>
<span>Wait for 3 second.Login Popup form Will appears.</span><br/><br/><br/>
<b>2.Onclick Popup Contact Form</b><hr/>
<p id="onclick">Popup</p>
</div>
</div>
<div id="contactdiv">
<form class="form" action="#" id="contact">
<img src="button_cancel.png" class="img" id="cancel"/>
<h3>Contact Form</h3>
<label>Name: <span>*</span></label>
<input type="text" id="name" placeholder="Name"/>
<label>Email: <span>*</span></label>
<input type="text" id="email" placeholder="Email"/>
<label>Contact No: <span>*</span></label>
<input type="text" id="contactno" placeholder="10 digit Mobile no."/>
<label>Message:</label>
<textarea id="message" placeholder="Message......."></textarea>
<input type="button" id="send" value="Send"/>
<input type="button" id="cancel" value="Cancel"/>
<br/>
</form>
</div>
<div id="logindiv">
<form class="form" action="#" id="login">
<img src="button_cancel.png" class="img" id="cancel"/>
<h3>Login Form</h3>
<label>Username : </label>
<input type="text" id="username" placeholder="Ex -john123"/>
<label>password : </label>
<input type="text" id="password" placeholder="************"/>
<input type="button" id="loginbtn" value="Login"/>
<input type="button" id="cancel" value="Cancel"/>
</form>
</div>
</body>
</html>
JavaScript File – jquery_popup.js
- Wait for 3 seconds and jQuery on load event of page allows Login form to popup on exact center of screen.
- To popup Conact Formuser have to click on “Popup” button.
$(document).ready(function() {
setTimeout(popup, 3000);
function popup() {
$("#logindiv").css("display", "block");
}
$("#login #cancel").click(function() {
$(this).parent().parent().hide();
});
$("#onclick").click(function() {
$("#contactdiv").css("display", "block");
});
$("#contact #cancel").click(function() {
$(this).parent().parent().hide();
});
$("#send").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contactno").val();
var message = $("#message").val();
if (name == "" || email == "" || contactno == "" || message == ""){
alert("Please Fill All Fields");
}else{
if (validateEmail(email)) {
$("#contactdiv").css("display", "none");
}else {
alert('Invalid Email Address');
}
function validateEmail(email) {
var filter = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if (filter.test(email)) {
return true;
}else {
return false;
}
}
}
});
$("#loginbtn").click(function() {
var name = $("#username").val();
var password = $("#password").val();
if (username == "" || password == ""){
alert("Username or Password was Wrong");
}else{
$("#logindiv").css("display", "none");
}
});
});
CSS File – jquery_popup.css
- Design login and contact forms.
- Sets popup form to appear at exact center of screen.
@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli);
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family: 'Fauna One', serif;
display:block;
}
h2{
margin-left: 65px;
text-shadow:1px 0px 3px gray;
}
h3{
font-size:18px;
text-align:center;
text-shadow:1px 0px 3px gray;
}
#onclick{
padding:3px;
color:green;
cursor:pointer;
padding:5px 5px 5px 15px;
width:70px;
color:white;
background-color:#123456;
box-shadow:1px 1px 5px grey;
border-radius:3px;
}
b{
font-size:18px;
text-shadow:1px 0px 3px gray;
}
#popup{
padding-top:80px;
}
.form{
border-radius:2px;
padding:20px 30px;
box-shadow:0 0 15px;
font-size:14px;
font-weight:bold;
width:350px;
margin:20px 250px 0 35px;
float:left;
}
input{
width:100%;
height:35px;
margin-top:5px;
border:1px solid #999;
border-radius:3px;
padding:5px;
}
input[type=button]{
background-color:#123456;
border:1px solid white;
font-family: 'Fauna One', serif;
font-Weight:bold;
font-size:18px;
color:white;
width:49%;
}
textarea{
width:100%;
height:80px;
margin-top:5px;
border-radius:3px;
padding:5px;
resize:none;
}
#contactdiv{
opacity:0.92;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
#logindiv{
opacity:0.92;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
#login,#contact{
width:350px;
margin:0px;
background-color:white;
font-family: 'Fauna One', serif;
position: relative;
border: 5px solid rgb(90, 158, 181);
}
.img{
float: right;
margin-top: -35px;
margin-right: -37px;
}
#contact{
left: 50%;
top: 50%;
margin-left:-210px;
margin-top:-255px;
}
#login{
left: 50%;
top: 50%;
margin-left:-210px;
margin-top:-158px;
}
Demo
No comments:
Post a Comment