[CSS/JS] Popup Login Box

techietim · #1 11-11-2006, 01:25 PM

Here is a little tutorial on how to make a pop up login box, with CSS and JavaScript.

Read the comments in the HTML for information. Remove the comments for use.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Popup Box</title>
  <style type="text/css">
  #popupbox{
  margin: 0; 
  margin-left: 40%; /* This gets it relatively center on the screen */
  margin-right: 40%; /* This gets it relatively center on the screen */
  margin-top: 50px; /* Makes it a little off the top of the screen */
  padding-top: 10px; /*  Make the text not touching the top on the login box */
  width: 20%; /* For centering it on the screen */
  height: 150px; /* The height of the login box */
  position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */
  background: #FBFBF0; /* Login Box background color. Change this if desired. */
  border: solid #000000 2px; /* Makes a black border around the login box */
  z-index: 9; /* Makes it on top of everything else */
  font-family: arial; /* Sets the font */
  visibility: hidden; /* Makes it hidden at first. Very Important.*/
  }
  </style>
  <script language="JavaScript" type="text/javascript">
  function login(showhide){
    if(showhide == "show"){
        document.getElementById('popupbox').style.visibility="visible"; /* If the function is called with the variable 'show', show the login box */
    }else if(showhide == "hide"){
        document.getElementById('popupbox').style.visibility="hidden"; /* If the function is called with the variable 'hide', hide the login box */
    }
  }
  </script>
</head>
<body>

<div id="popupbox"> <!--Start login box-->
<form name="login" action="" method="post">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>
</form>
<br />
<center><a href="javascript:login('hide');">close</a></center> <!-- Closes the box-->
</div> <!--End login box-->

<p><!--Dummy text to show it is on top-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ornare mauris quis lorem. Pellentesque in enim. Donec quis tortor quis arcu rhoncus porta. Duis est elit, tincidunt eu, auctor ac, tristique quis, lacus. Aliquam erat volutpat. Donec sagittis. Proin varius sem sed purus dapibus ornare. Mauris pretium ipsum sit amet augue. Vivamus purus metus, blandit et, cursus in, imperdiet eu, arcu. Praesent condimentum arcu ac eros. Maecenas consectetuer, quam ac sodales mollis, tortor neque bibendum nulla, eu ultrices eros sem at nisi. Donec vitae lectus. Vestibulum laoreet mollis turpis.
</p>
<p><!--Dummy text to show it is on top-->
Nulla pede. Integer id quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nibh. In hac habitasse platea dictumst. Aliquam ornare mauris fermentum purus aliquam eleifend. Vivamus nulla. Suspendisse convallis accumsan ligula. Praesent volutpat sollicitudin felis. In tincidunt, nisl sodales volutpat aliquam, quam lorem tristique quam, vel imperdiet sem enim sit amet tellus. Praesent molestie mollis tellus.
</p>
<p><a href="javascript:login('show');">login</a></p> <!--Opens the box -->
</body>
</html>

Working example

Enjoy!

vonhabenstein · #2 12-25-2006, 01:41 AM

Hi
The link to your example doesn't work.

techietim · #3 12-25-2006, 05:18 AM

Yeah I know, here a new one.

BBarash · #4 12-25-2006, 02:52 PM

Thats pretty cool!

techietim · #5 12-25-2006, 03:44 PM

Thanks. I know some people like having something like this better then having a login form on their page.

Nile · #6 02-05-2007, 10:22 AM

Yeah exept how do you choose the password?

techietim · #7 02-05-2007, 10:24 AM

Well, This only has the form for the login. You have to have to write your own login script.

Nile · #8 02-05-2007, 10:36 AM

ok.... I got a form to login form a website and here it is

HTML Code:

<script>
//Encrypted Password script- By Rob Heslop
//Script featured on Dynamic Drive 
//Visit http://www.dynamicdrive.com 
</script>
function submitentry(){
password = document.password1.password2.value.toLowerCase()
username = document.password1.username2.value.toLowerCase()
passcode = 1
usercode = 1
for(i = 0; i < password.length; i++) {
passcode *= password.charCodeAt(i);
}
for(x = 0; x < username.length; x++) {
usercode *= username.charCodeAt(x);
}
//CHANGE THE NUMBERS BELOW TO REFLECT YOUR USERNAME/PASSWORD
if(usercode==134603040&&passcode==126906300)
//CHANGE THE NUMBERS ABOVE TO REFLECT YOUR USERNAME/PASSWORD
{
window.location=password+".htm"}
else{
alert("password/username combination wrong")}
}
</script>
 
<form name="password1">
<strong>Enter username: </strong>
<input type="text" name="username2" size="15">
<br>
<strong>Enter password: </strong>
<input type="password" name="password2" size="15">
 
<input type="button" value="Submit" onClick="submitentry()">
</form>

so then i took some of it off and i got this:

Code:

]<script>
//Encrypted Password script- By Rob Heslop
//Script featured on Dynamic Drive 
//Visit http://www.dynamicdrive.com 
</script>
<script>
function login(){
password = document.login.password.value.toLowerCase()
username = document.password1.username.value.toLowerCase()
passcode = 1
usercode = 1
for(i = 0; i < password.length; i++) {
passcode *= password.charCodeAt(i);
}
for(x = 0; x < username.length; x++) {
usercode *= username.charCodeAt(x);
}
 
if(usercode==353898606600&&passcode==353898606600)
{
 
 
window.location="http://play.clubpenuin.com"}
else{
alert("password/username combination wrong")}
}
</script>

Then i put if together like this:

HTML Code:

<script>
//Encrypted Password script- By Rob Heslop
//Script featured on Dynamic Drive 
//Visit http://www.dynamicdrive.com 
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script>
function login(){
password = document.login.password.value.toLowerCase()
username = document.password1.username.value.toLowerCase()
passcode = 1
usercode = 1
for(i = 0; i < password.length; i++) {
passcode *= password.charCodeAt(i);
}
for(x = 0; x < username.length; x++) {
usercode *= username.charCodeAt(x);
}
 
if(usercode==16866649800&&passcode==3.3600667627135376e+24)
{
 
 
window.location="http://play.clubpenuin.com"}
else{
alert("password/username combination wrong")}
}
</script>
 
<html>
<head>
<title>Popup Box</title>
<style type="text/css">
#popupbox{
margin: 0; 
margin-left: 40%; /* This gets it relatively center on the screen */
margin-right: 40%; /* This gets it relatively center on the screen */
margin-top: 50px; /* Makes it a little off the top of the screen */
padding-top: 10px; /* Make the text not touching the top on the login box */
width: 20%; /* For centering it on the screen */
height: 150px; /* The height of the login box */
position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */
background: #FBFBF0; /* Login Box background color. Change this if desired. */
border: solid #000000 2px; /* Makes a black border around the login box */
z-index: 9; /* Makes it on top of everything else */
font-family: arial; /* Sets the font */
visibility: hidden; /* Makes it hidden at first. Very Important.*/
}
</style>
<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible"; /* If the function is called with the variable 'show', show the login box */
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden"; /* If the function is called with the variable 'hide', hide the login box */
}
}
</script>
</head>
<body>
 
<div id="popupbox"> <!--Start login box-->
<form name="login">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="button" value="Login" onClick="login()"></center>
</form>
<br />
<center><a href="javascript:login('hide');">close</a></center> <!-- Closes the box-->
</div> <!--End login box-->
 
<p><a href="javascript:login('show');">login</a></p> <!--Opens the box -->
</body>
</html>

But it still doesnt work
NOTE:The assword is diffrent almost every time the first pass word is good and the user is john the second is Nile55 and same with the last and i also changed the functuion this from submitentry() to login()

Nile · #9 02-05-2007, 04:24 PM

Please help me!!

techietim · #10 02-05-2007, 04:27 PM

I wouldn't use Javascript Password Protection. It's not secure.
As for your script, I dont know whats wrong.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode