Login on click function Js

Ok I wanna know how to make a Login function like for an example when I click Login it popup's a Login box and I know it is CSS and JS but I Don't know anything about JS so can someone just post it here.

How did you this on your site

i would like to know this as well

You have to create yourself a log in form. Add into templates or announcement of something, then just make it popup on click like Rideem showed.

Heres a code you can use on an HTML page or anywhere that allows HTML. I have this on my home page. Just copy and paste this code to an HTML document. You can change the colors to your liking. Its in a spoiler code which I thought of and works like a pop-out. If you want to see it in action click my forum icon under my profile and on that page click "Login" and you'll see how it looks and works. Of course you don't have to actually login but you will see what it looks like. It works great. I tested it on IE, Firefox, and Chrome browsers just to be absolutely sure it works on all of them, and it does. No reason why it wouldn't but I like to see it for myself anyway. Oh, and turn up your volume.

You'll need to add your forum url login page to this code where it says to. Your forum login page url will end in /login.

Code:

<a href="#" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/>Login</a>


<div id="spoiler" style="display:none">
<br><br>
<form action="YOUR FORUM URL LOGIN PAGE GOES HERE" method="post"><table bgcolor="#262627" cellspacing="1" cellpadding="3" border="2" bordercolor="#1E90FF"><tbody><tr><td width="45%" align="right"><font face="verdana" color="#ADADAD" size="2"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right"><font face="verdana"  color="#ADADAD" size="2">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2"><font face="verdana"  color="#ADADAD" size="2">Log me on automatically each visit: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2"><input type="submit" class="mainoption" name="login" value="Log in" /><input name="redirect" type="hidden" value="/h5-loading-page"/></td></tr></tbody></table></form></font>
</div>

runawayhorses that's what i want but I DONT want to appear at the bottom when you click Login it fades in the center

Not on my browsers it doesn't.

Know that's what I want it to do just like Fancy box but with Java Script

Are you talking about when you click 'my' Login link it shows up at the bottom of the page and fades in the center? What do you mean by fades in the center?

If you are talking about when you added the code to your page then the reason would be because you have to add alignment tags. Which do you mean my Login or yours?

when you on Rideem3 site then when you click Login it appears in the center and it fades in when you click Login

What happened when you clicked my Login link?

oh ok I want it in the center with this code runawayhorses gave me

I don't want it at the bottom I want it in center

Code:


<a href="#" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/>Login</a>
<div id="spoiler" style="display:none">
<br><br>
<form action="YOUR FORUM URL LOGIN PAGE GOES HERE" method="post"><table bgcolor="#262627" cellspacing="1" cellpadding="3" border="2" bordercolor="#1E90FF"><tbody><tr><td width="45%" align="right"><font face="verdana" color="#ADADAD" size="2"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right"><font face="verdana"  color="#ADADAD" size="2">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2"><font face="verdana"  color="#ADADAD" size="2">Log me on automatically each visit: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2"><input type="submit" class="mainoption" name="login" value="Log in" /><input name="redirect" type="hidden" value="/h5-loading-page"/></td></tr></tbody></table></form></font>
</div>


You have to use alignment tags.

Where are you adding the code?

In the homepage messages but I was just testing it but im gonna put it in the Templates

Put this at the beginning of all the code:

Code:

<center>

And this at the end of all the code:

Code:

</center>

Now do me a favor and tell me what happens when you click my Login link. Where does the login box appear to you?

The Login box is in the center

Well I go by the idea if it ain't broke don't fix it..

I got that code from a link LG posted when he was helping someone else awhile back, he said if you want a simple login that code would work. So I tried it and it works. All I did to it is put it in a spoiler.

OK thanks, that's cool. By the way when you click my Login link where does the box appear to you? thanks

Can someone locked this, It's done Im just gonna code it more