Results 1 to 4 of 4

Thread: Pop up "login window" as seen on Twitter....

  1. #1
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default Pop up "login window" as seen on Twitter....

    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!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    I suggest starting here:
    http://dynamicdrive.com/dynamicindex8/index.html

    One possibility is this script:
    http://dynamicdrive.com/dynamicindex...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.)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    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.....


    Code:
    <!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>
    Last edited by djr33; 05-20-2010 at 09:33 PM. Reason: Use [code] tags so it is easier to read!

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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:
    Code:
    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.)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •