Create Modal Box Using Jquery
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal Box</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Buttons that trigger the popup
$(".signup_popup_button").click(function(e) {
$(this).doPopup();
//this is needed so it wont fire the closePopup function when we click the body
e.stopPropagation();
});
$.fn.doPopup = function(options) {
var defaults = {
slide: 0,
};
//popup window div
var popup_window = $("#popup_window");
//loader
var loader = $(".loader");
//state of popup
//if its 0 its hidden , 1 its shown
var state = 0;
//self explanotary, centers the popup window
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupWidth = popup_window.width();
//centering
popup_window.css({
"position": 'absolute',
"top": '21%',
"left": windowWidth/2-popupWidth/2
});
$("#bg_color").css({
"height": windowHeight
});
}
//remove the background color when popup is active
function backgroundFade(){
$("#bg_color").css({
"opacity": "0.7"
});
$("#bg_color").fadeIn("fast");
}
//closes the popup
function closePopup(){
//remove background fade
$("#bg_color").fadeOut("fast")
//close popup
popup_window.fadeOut("fast");
}
//show the page content
function showContent(){
//show div containing the forms
$(".popup_content_data").show();
}
//this is needed so the popup remains shown
popup_window.click(function(e){
e.stopPropagation();
});
//when we click the X button on the top right corner of the popup
//we close the window
$(".popup_window_close").click(function(){
state=0;
closePopup();
});
//when we click on the body we close the popup window
$("body").click(function(){
if (state == 1){
closePopup();
state = 0;
}
});
//Shows the Popup
function showPopup(type){
if (state == 0){
//fade background on click
backgroundFade()
if (type == ""){
$(".popup_content_data").hide();
//show the loading text and image
loader.show();
}
//dynamically show the popup window
centerPopup();
//show the popup window
popup_window.show();
//animate the popup window and hide the loader
setTimeout(function(){
loader.hide();
showContent();
}, 200);
state = 1;
}
}
showPopup("fade");
};
})(jQuery);
</script>
<style>
body{
font-size:13px;
font-family:Tahoma;
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
h1,h2,h3{
margin:0;
padding:0;
}
#signup_submit{
min-width:100px;
max-width:135px;
display:inline-block;
height:18px;
border:1px solid #B5B5B5;
padding:5px;
background: -moz-linear-gradient(center top , #FFFFFF, #E3E3E3) repeat scroll 0 0 #F6F6F6;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#E3E3E3)";
background-image: -o-linear-gradient(#FFFFFF,#E3E3E3);
color:#3D3D3D;
cursor:pointer;
background-color:#E8E8E8;
border-radius:3px;
}
.message_error{
border:solid 1px #a1a1a1;
background-color: #FFC922;
border-radius:5px;
color: #3B3B3B;
width:96%;
padding:5px;
display:none;
float:left;
margin-top:10px;
}
.signup_popup_button{
float:left;
width:78px;
margin-left:-1px;
text-align:center;
}
.recoverpass_popup_button{
float:left;
width:110px;
margin-left:-1px;
border-radius:0;
text-align:right;
}
.activate_account_popup_button{
float:left;
border-radius:0 3px 3px 0;
margin-left:-1px;
}
#popup_window{
display:none;
border:12px solid #292929;
padding:12px;
border-radius:12px;
width:591px;
min-height:250px;
overflow:hidden;
word-wrap: break-word;
position:absolute;
_position:absolute;
z-index:9999;
background-color:#FFFFFF;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.44, #EDEDED),
color-stop(0.72, #FFFFFF),
color-stop(0.86, #FFFFFF)
);
background-image: -moz-linear-gradient(
center bottom,
#EDEDED 44%,
#FFFFFF 72%,
#FFFFFF 86%
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#EDEDED)";
background-image: -o-linear-gradient(#FFFFFF,#EDEDED);
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.loader{
display:none;
font-family:Tahoma;
font-size:20px;
width:150px;
height:150px;
text-align:center;
margin:0 auto;
margin-top:20%;
}
.popup_content_data{
display:none;
float:left;
width:100%;
}
.popup_content_sign_in,.popup_content_sign_up,.popup_content_recoverpass,.popup_content_activate_account,.popup_content_resent_activation_code{
margin:0 auto;
margin-left:3px;
margin-top:5px;
width:395px;
padding:5px 5px 11px;
float:left;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
min-height:325px;
display:none;
}
.popup_content_sign_in label,.popup_content_sign_up label,.popup_content_recoverpass label,.popup_content_activate_account label,.popup_content_resent_activation_code label{
display:block;
width:125px;
float:left;
height:20px;
padding-top:5px;
padding-left:3px;
}
.popup_window_close{
background-image: url('images/close.png');
width:24px;
height:24px;
float:right;
cursor:pointer;
}
.popup_header_title{
margin:0 auto;
width:365px;
padding:0;
font-family:Tahoma;
}
.actions_header_title{
display:inline-block;
text-align:center;
font-size:20px;
padding-bottom:3px;
margin-bottom:15px;
}
.user_profile_details{
float:left;
width: 558px;
margin-top:15px;
margin-left:139px;
}
.user_profile_details label{
float:left;
margin-top:3px;
padding-top:2px;
height:20px;
width:300px;
}
#user_settings_gender{
float:left;
width:257px;
}
#user_page_username{
float:right;
}
#bg_color{
display:none;
position:fixed;
_position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#username_input_signin,#user_settings_current_password,#user_settings_retype_password,#user_settings_password,#user_settings_email,#user_settings_lastname,#user_settings_firstname,#user_settings_username,#username_input_signup,#firstname_input_signup,#lastname_input_signup,#password_input_signin,#password_input_signup,#retype_password_input_signup,#email_input_signup,#email_input_recpass,#email_input_activateaccount,#code_input_activateaccount,#email_input_resent_activation_code{
border:1px solid #CCC;
border-radius:5px;
height:20px;
width:250px;
padding:3px;
margin-bottom:5px;
float:left;
}
#username_input_signup:hover{
border:1px solid #000000;
}
#username_input_signin:focus,#user_settings_current_password:focus,#user_settings_retype_password:focus,#user_settings_password:focus,#user_settings_email:focus,#user_settings_lastname:focus,#user_settings_firstname:focus,#user_settings_username:focus,#username_input_signup:focus,#firstname_input_signup:focus,#lastname_input_signup:focus,#password_input_signin:focus,#password_input_signup:focus,#retype_password_input_signup:focus,#email_input_signup:focus,#email_input_recpass:focus,#email_input_activateaccount:focus,#email_input_resent_activation_code:focus,#code_input_activateaccount:focus{
-moz-box-shadow: 0 0 3px 3px #FFDB2C;
-webkit-box-shadow: 0 0 3px 3px #FFDB2C;
box-shadow: 0 0 3px 3px #FFDB2C;
border:1px solid #A68323;
}
#gender_input_signup{
width:120px;
}
.popup_right_message{
background-color: #FFE16B;
border-radius: 5px 5px 5px 5px;
float: right;
padding: 5px;
width: 170px;
margin-top:11px;
}
</style>
</head>
<body>
<div id="bg_color"></div>
<div style="text-align: center;">
<div id="user_controls">
<div class="signup_popup_button" id="sign_up" title="Sign up">Sign Up</div>
</div>
</div>
<div id="popup_window">
<div class="loader"><img src="images/loading.gif" style="border:0;" alt="loading" />Loading...</div>
<div class="popup_content_data">
<span class="popup_window_close" title="Close Popup"></span>
<h1>Sign Up</h1>
<div class="popup_content_sign_up" style="display:inline-block;">
<label for="username_input_signup">
Username:
</label>
<input type="text" id="username_input_signup" />
<br />
<label for="firstname_input_signup">
Firstname:
</label>
<input type="text" id="firstname_input_signup" />
<br />
<label for="lastname_input_signup">
Lastname:
</label>
<input type="text" id="lastname_input_signup" />
<br />
<label for="password_input_signup">
Password:
</label>
<input type="password" id="password_input_signup" />
<br />
<label for="retype_password_input_signup">
Re-type Password:
</label>
<input type="password" id="retype_password_input_signup" />
<br />
<label for="email_input_signup">
Email:
</label>
<input type="text" id="email_input_signup" />
<br />
<label for="gender_input_signup">
Gender:
</label>
<select name="gender_input_signup" id="gender_input_signup">
<option name="0">Select Gender:</option>
<option name="1">Male</option>
<option name="2">Female</option>
</select>
<br />
<div id="signup_submit">Sign up</div><br />
<div class="message_error"></div>
</div>
</div>
</div>
</body>
</html>
