Log in

View Full Version : Pop up "login window" as seen on Twitter....


Shammus
05-19-2010, 11:57 PM
Just curious if this site had a script already in it's archives similar to the one on Twitter's homepage for it's popup login window.

If you go to twitter.com, and click the "sign in" button in the upper left hand corner, the "sign in" button is replaced by an "on-state" image, the window pops up and you can close the window by clicking anywhere on the screen. No "X" or "close window" button necessary.

I don't really want to steal their popup, so if someone here can point me in the direction of something similar, it would be much appreciated. Thanks in advance!
djr33
05-20-2010, 02:29 AM
I suggest starting here:
http://dynamicdrive.com/dynamicindex8/index.html

One possibility is this script:
http://dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm

Changes:
In the Javascript for the modal window, find the part that generates the background layer below the window. Do two things:
1. Remove the background image.
2. Add an onClick event-- use the Javascript function to close the window. I found that windowname.hide() works well. (.close() gave me some trouble and it wasn't worth fixing for my uses.)
Shammus
05-20-2010, 07:04 PM
Thanks for the response. Below is what I have so far. So far I have the background image and popup appearing properly when you click on the "login" link. Thing is, how do I get both the background image and popup to disappear when you click anywhere on the screen (that's not within the popup).

Thanks much.....



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Small Javascript Popup</title>
<script type="text/javascript" src="scripts.js"></script>

<style type="text/css">

body{margin:0;}

a:active{outline:none; border:none;}

img
{border:none;}

.boxheader
{background-color:#a2a2a2;text-align:right;padding:4px;}

#boxholder
{font-size:11px;display:none; width:250px;position:absolute;z-index:200;left:332px;top:20px;color:#000; background-color:#fff;border:1px solid #000;}

#boxholder p
{margin:12px 16px;}

.toplinks a
{padding:0 10px;}

.login
{width:52px; height:43px; outline:none;}



</style>

<script type="text/javascript">

function hideShowCallout()
{
document.getElementById('login').style.background = "url('loginbk_over.gif') no-repeat";
var di = document.getElementById('boxholder');
if(di.style.display != 'block')
{
di.style.display = 'block';
}



return;


}

</script>


</head>

<body>


<table cellpadding="8" cellspacing="8" class="toplinks">
<tr>


<td><a href="javascript:void(0);" class="login" id="login" onclick="hideShowCallout()">Login</a></td>


</tr>
</table>
<div id="boxholder">
<p>Content within popup goes here</p>
</div>



</body>
</html>
djr33
05-20-2010, 09:32 PM
You must edit the Javascript file called "modal.js".
Here's what I changed, and it worked for me.
Go to the end of the file and find the "document.write()" function. Replace that with the following:

document.write('<div id="interVeil" onClick="WINDOWNAME.hide()"></div>')
dhtmlwindow.addEvent(window, function(){if (typeof dhtmlmodal!="undefined") dhtmlmodal.adjustveil()}, "resize")


Remember that you must change WINDOWNAME to the name of your window-- I didn't figure out a way to automatically detect the name, but I guess you could work this in if you needed it. (You could set that as a variable then when you create the window set its name as that, etc.)