I will show how to Create simple popup window using jQuery. Simple jQuery POPUP Window Tutorial used to show alerts messages, login form dialog box, notifications, error dialog box and many more with beautiful css styles.
Just follow my Simple Steps
HTML Markup
To Create simple Simple jQuery POPUP Window we need to write the HTML code as shown below
<!doctype html>
<html>
<head>
<title>jQuery Popup Dialog Box
Tutorial</title>
</head>
<body>
<!-- popupbx -->
<div class='popup'>
<div class='popup_box'>
<div class="topclor"></div><div
class="topclor_two"></div><div class="topclor_three"></div>
<img src='images/close.gif' alt='quit' class='close' id='close_img' />
<h1> More Web Designers &
Developers Tutorials
</h1>
<div class="clear"></div>
<div class="clickher_button">
<a href="http://www.nowstartwebdesign.com"
target="_blank">Click Here To Learn</a>
</div>
</div>
</div>
<!-- click here to see
popup button -->
<div id='popup_box'>
<a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a>
<br/>
</div>
</body>
</html>
CSS Code
Let’s go to the CSS code. Follow the Below CSS.
body {
margin: 0;
margin: 0;
padding: 0;
font: 12px/15px Tahoma, Geneva, sans-serif;
color: #555;
}
.clear {
clear: both;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
a {
text-decoration: none;
text-align: center;
}
.popup {
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.popup_box {
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
box-shadow: 0 2px 5px #000;
}
.popup_box h1 {
clear: both;
color: #555555;
text-align: center;
}
.popup_box .close {
float: right;
height: 18px;
left: 0px;
position: relative;
top: 0px;
width: 18px;
}
.popup_box .close:hover {
cursor: pointer;
}
.clickher_button {
background: #1C94C6;
padding: 10px 5px;
text-align: center;
font-size: 20px;
font-weight: bold;
margin: 50px auto 0 auto;
width: 250px;
}
.clickher_button a {
color: #ffffff;
outline: none;
}
.topclor {
border-top: solid 5px #2FA8C0;
float: left;
width: 200px;
}
.topclor_two {
border-top: solid 5px #D84533;
float: left;
width: 200px;
}
.topclor_three {
border-top: solid 5px #EAA91B;
float: left;
width: 200px;
}
Below jQuery Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function() {
var overlay = $('<div
id="overlay"></div>');
$('.close').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.close_img').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.click').click(function() {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
Demo Download
No comments :
Post a Comment