Customer login in overlapping window on any page.

Idealws · April 18, 2007

Hello,

Not to sure if this is the place to post this but I figured I would share a

login form you can put anywhere on your site or attach to any login link.

Here are a couple screenshots of what I mean:

Login Text Link

idealws.com/loginlink.gif

Login Text Link Clicked

idealws.com/loginlinkpop.gif

Below file: idealws.com/loginbox.html

Here is the source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>WHMCS Customer Login</title>
<script language="JavaScript">
<!--
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="right")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
	totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
	parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
	var subobj=document.getElementById(subobjstr)
	subobj.style.display=(subobj.style.display!="block")? "block" : "none"
	var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
	var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
	subobj.style.left=xpos+"px"
	subobj.style.top=ypos+"px"
	return false
}else{
	return true
}
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
//-->
</script>
<style type="text/css">
td.logintitle {
background: #b92025;
color: White;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 4px 4px 4px 4px;
}
td.logintext {
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px 4px 4px 4px;
}
a, a:active, a:focus, a:link, a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #b92025;
text-decoration: none;
border-bottom-color: Black;
border-bottom-style: solid;
border-bottom-width: 1px;
}
a:hover {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
border-bottom-color: #b92025;
border-bottom-style: solid;
border-bottom-width: 1px;
}
a.loginlink, a:active.loginlink, a:focus.loginlink, a:link.loginlink, a:visited.loginlink {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
}
a:hover.loginlink {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
border-bottom-color: #b92025;
border-bottom-style: solid;
border-bottom-width: 1px;
}
a.loginlinksm, a:active.loginlinksm, a:focus.loginlinksm, a:link.loginlinksm, a:visited.loginlinksm {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #b92025;
text-decoration: none;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
}
a:hover.loginlinksm {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
text-decoration: none;
border-bottom-color: #b92025;
border-bottom-style: solid;
border-bottom-width: 1px;
}
input.loginsubmit {
border: 1px solid Silver;
background: #E8E8E8;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
</style>
</head>

<body>
[url="sitemap.php"]customer login[/url]
<DIV align="left" id="subcontent" style="position:absolute; border: 1px solid #D4D4D4; background-color: white; width: 300px; padding: 0px; display:none">
<form method="post" action="http://yourdomain.com/whmcs/dologin.php?goto=clientarea">
<table width="300" cellspacing="0" cellpadding="3" border="0">
<tr>
	<td class="logintitle">Customer Login</td>
	<td class="logintitle"><div align="right">[url="#"]Close[/url]</div></td>
</tr>
<tr>
	<td class="logintext">Email Address:</td>
	<td><input type="text" name="username" size="22"></td>
</tr>
<tr>
	<td class="logintext">Password:</td>
	<td><input type="password" name="password" size="22"></td>
</tr>
<tr>
	<td align="left" class="logintext" width="150">[url="http://yourdomain.com/whmcs/passwordreminder.php"]Forgot your password?[/url]</td>
	<td align="right"><input type="submit" value="Submit Login" class="loginsubmit"></td>
</tr>
</table>
</form>
</DIV>
</body>
</html>

Hope this helps some of you. Any questions please feel free to ask.

Regards,

Ray

Sign In

Customer login in overlapping window on any page.

Recommended Posts

Idealws

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Latest Activity

Blog

Technical Support

Important Information