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, I developed a Pop up Registration Form without any need of JQuery.
Opacity.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/x-component";> <link rel="stylesheet" type="text/css" href="css/mycss.css"/> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/myjs.js" type="text/javascript"></script> </head> <body> <!-- Start Overlay --> <div id="overlay"></div> <!-- End Overlay --> <!-- Start Special Centered Box --> <div id="specialBox"> <form action="" method="post" id="register-form" novalidate="novalidate"> <a href="" onMouseDown="toggleOverlay()" id="closeovrlay" style="margin-left:90% "><img src="close.jpg" /></a> <h2>User Registration</h2> <fieldset> <div class="fieldgroup"> <label for="firstname">First Name</label> <input type="text" name="firstname"> </div> <div class="fieldgroup"> <label for="lastname">Last Name</label> <input type="text" name="lastname"> </div> <div class="fieldgroup"> <label for="email">Email</label> <input type="text" name="email"> </div> <div class="fieldgroup"> <label for="password">Password</label> <input type="password" name="password"> </div> <div class="fieldgroup"> <p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p> <input type="submit" value="Register" class="submit"> <input type="reset" value="Reset" name="reset"> </div> </fieldset> <div class="fieldgroup"> <p>Already registered? <a href="/login">Sign in</a>.</p> </div> <button onMouseDown="toggleOverlay()" id="closeovrlay">Close Overlay</button> </form> </div> <!-- Start Special Centered Box --> <!-- Start Normal Page Content --> <div id="wrapper"> <h2>My web page heading</h2> <p>Some web page content ...</p> <button onClick="toggleOverlay()" id="aplyoverlay">Apply Overlay</button> </div> <!-- End Normal Page Content --> </body> </html>
Here is the CSS code:
mycss.css
body
{
background:url(../bg.jpg) repeat-x;
}
input:focus,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="image"]:hover,textarea:focus{
border-color:rgba(82, 168, 236,0.8);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168,236, 0.6); /* for crome and safari */
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168,236, 0.6); /* for firefox */
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236,0.6); /* Opera 10.5+, and IE6+ */
outline:0;
outline:thin dotted \9;
}
#overlay {
display: none; /* hide overlay div.*/
z-index: 2; /* div will display at top from its original contents. */
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
}
#specialBox {
background: url("form-fieldset.gif") repeat-x scroll left bottom #F8FDEF;
border: 1px solid #DFDCDC;
border-radius: 15px 15px 15px 15px;
moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000;
display: none; /* hide overlay div */
position: relative;
z-index: 3; /* div will display at top from overlay div. */
margin: 50px auto 0px auto;
width: 480px;
height:600;
}
#register-form .fieldgroup {
background: url("form-divider.gif") repeat-x scroll left top transparent;
display: inline-block;
padding: 8px 35px;
width: 340px;
}
#register-form input
{
font-size:16px; width:220px; margin-top:14px;
line-height:18px;color:#555555;border:1px solid #96a6c5;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;
}
#register-form input[type="submit"],input[type="reset"]
{
font-size:16px; width:100px; margin-top:14px; margin-left:60px; max-width:100px;
color:#555555;border:1px solid #96a6c5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
#register-form .fieldgroup label {
float: left;
padding: 15px 0 0;
width: 110px;
}
#register-form .fieldgroup label.error {
color: #FB3A3A;
margin: 4px 0 5px 125px;
padding: 0;
text-align: left;
width: 220px;
}
#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
Java Script code:
myjs.js
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var registerform = document.getElementById('register-form');
/*code to detect browser*/
var browser=navigator.appName //get Browser name
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if(browser=="Netscape") //For mozilla firefox
{
overlay.style.opacity = .7; //transparent overlay div
}
if(browser=="Microsoft Internet Explorer")
{
//overlay.style.filter:alpha(opacity=70); /* IE 5-7 */
//-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
specialBox.style.border = "none";
//specialBox.style.background = "none";
} else {
overlay.style.display = "block";
$("#specialBox").fadeIn(3000);
specialBox.style.display = "block";
specialBox.style.border="1px solid #DFDCDC";
}
}
See the output here :-
Friends, you can write comments if it's useful for you...
ReplyDelete