[转]jQuery Popup Login and Contact Form

本文转自：http://www.formget.com/jquery-popup-form/

Pop up forms are the smart way to present your site. These forms are similar to other forms except, these forms appears abruptly on exact center of screen and requests user to take immediate action over them.

Here, In this example, we explained how to create popup form like Login and Contact form to fulfill below requirements:

Login Popup form should appears at the center of screen after specific time interval by jQuery on load event .
Contact form may appear on click event of a button or any link.

Here, we have covered above requirements in this example as given below:

To popup login form after specific time interval on page load, we used following jQuery code.

setTimeout(popup, 3000); // Setting time 3s to popup login form

function popup() {

$("#logindiv").css("display", "block");

}

To popup login form on click event of a button, we used following jQuery code.

$("#onclick").click(function() {

$("#contactdiv").css("display", "block");

});

Just watch our live demo or download zip file to use it.

Download Code
LIVE DEMO & GET WP THEME

To learn more about it, go through our complete jQuery and HTML codes given below.

HTML File – jquery_popup.html

Given below our complete HTML code to create Login and Contact form.

<html>

<head>

<title>jQuery Popup Login and Contact Form</title>

<script src="js/jquery.min.js"></script>

<link rel="stylesheet" href="css/jquery_popup.css" />

<script src="js/jquery_popup.js"></script>

</head>

<body>

<div id="mainform">

<h2>jQuery Popup Form Example</h2>

<!-- Required div starts here -->

<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>

<br/>

</div>

<!-- Right side div -->

<div id="formget"><a href=http://www.formget.com/app><img src="data:images/formget.jpg" alt="Online Form Builder"/></a>

</div>

</div>

<!--Contact Form -->

<div id="contactdiv">

<form class="form" action="#" id="contact">

<img src="data:images/button_cancel.png" class="img" id="cancel"/>

<h3>Contact Form</h3>

<hr/><br/>

<label>Name: <span>*</span></label>

<br/>

<input type="text" id="name" placeholder="Name"/><br/>

<br/>

<label>Email: <span>*</span></label>

<br/>

<input type="text" id="email" placeholder="Email"/><br/>

<br/>

<label>Contact No: <span>*</span></label>

<br/>

<input type="text" id="contactno" placeholder="10 digit Mobile no."/><br/>

<br/>

<label>Message:</label>

<br/>

<textarea id="message" placeholder="Message......."></textarea><br/>

<br/>

<input type="button" id="send" value="Send"/>

<input type="button" id="cancel" value="Cancel"/>

<br/>

</form>

</div>

<!--Login Form -->

<div id="logindiv">

<form class="form" action="#" id="login">

<img src="data:images/button_cancel.png" class="img" id="cancel"/>

<h3>Login Form</h3>

<hr/><br/>

<label>Username : </label>

<br/>

<input type="text" id="username" placeholder="Ex -john123"/><br/>

<br/>

<label>password : </label>

<br/>

<input type="text" id="password" placeholder="************"/><br/>

<br/>

<input type="button" id="loginbtn" value="Login"/>

<input type="button" id="cancel" value="Cancel"/>

<br/>

</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();

});

// Contact form popup send-button click event.

$("#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;

}

}

}

});

// Login form popup login-button click event.

$("#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;

}

Conclusion:

Popup forms are event triggered forms. here, we used jQuery’s onload and click events to popup login and contact forms respectively, it will appear on the screen. Keep following our other blogs.