login pop up on screen code!

phphelpme · #1 (**permalink**) 08-09-10, 07:04 PM

i need help making a login box that pops up inside the webpage , not a seperate window , but right there in the page , if any one could help PLEASE HELP thank you , please leave me a script!

Yeroon · #2 (**permalink**) 08-10-10, 11:45 AM

Try this:

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></title>
  <style type="text/css">
  #popupbox{
  margin: 0; 
  margin-left: 40%; 
  margin-right: 40%;
  margin-top: 50px; 
  padding-top: 10px; 
  width: 20%; 
  height: 150px; 
  position: absolute; 
  background: #FBFBF0; 
  border: solid #000000 2px; 
  z-index: 9; 
  font-family: arial; 
  visibility: hidden; 
  }
  </style>
  <script language="JavaScript" type="text/javascript">
  function login(showhide){
    if(showhide == "show"){
        document.getElementById('popupbox').style.visibility="visible";
    }else if(showhide == "hide"){
        document.getElementById('popupbox').style.visibility="hidden"; 
    }
  }
  </script>
</head>
<body>

<div id="popupbox"> 
<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> 
</div> 

<p>
Blablalblalbla Blablalblalbla Blablalblalbla Blablalblalbla BlablalblalblaBlablalblalblaBlablalblalblaBlablalblalbla
</p>
<p>
XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ XYZ 
</p>
<p><a href="javascript:login('show');">login</a></p>
</body>
</html>