SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small pop up window when an external link is clicked

    I know there are tons of example and generators out there, but I cant find one to specificaly do what I need. I am not a js expert. What I really need is a code snipet or generator that will open a small pop up window when someone clicks an external link.

    For example. clicking on a link like
    <a href="http://sitepointforums.com" onclick=someniftypieceofjavascript></a>
    Would take you to sitepointforums but open a small pop up window on your site. I would like to be able to pass all kinds of php info to it as well. It would also be cool if the window had no address bar or any of that jazz, and it shsould be small 100px X 100px.

    If it makes a helper feel better, this is not meant to be a annoying, it will be a functional part of my website.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's one way
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <meta name='author' content='Author'>
    <meta name='description' content='Description'>
    <meta name='keywords' content='Keywords'>
    <link rel='stylesheet' type='text/css' href=''>
    <style type='text/css'>
    .blue {
      color: blue;
    }
    .red {
      color: red;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      initPopupLinks('popLink');
    }
    
    function initPopupLinks(popupClassName)
    {
      var lnks = document.links;
      if (lnks) {
        for (var i = 0; i < lnks.length; ++i) {
          if (typeof lnks[i].className == 'string' && lnks[i].className.indexOf(popupClassName) != -1) {
            lnks[i].onclick = popupLinkOnClick;
          }
        }
      }
    }
    
    function popupLinkOnClick()
    {
      xWinOpen('http://cross-browser.com/');
    }
    
    var xChildWindow = null;
    function xWinOpen(sUrl)
    {
      // Modify 'features' to suit your needs:
      var features = "left=0,top=0,width=600,height=500,location=0,menubar=0," +
        "resizable=1,scrollbars=1,status=0,toolbar=0";
      if (xChildWindow && !xChildWindow.closed) {xChildWindow.location.href  = sUrl;}
      else {xChildWindow = window.open(sUrl, "myWinName", features);}
      xChildWindow.focus();
      return false;
    }
    </script>
    </head>
    <body>
    
    <p>These links will get a popup:</p>
    <p>
      <a class='red popLink' href='http://www.opera.com/'>Opera</a>
      &nbsp;|&nbsp;
      <a class='blue popLink' href='http://www.mozilla.com/firefox/'>Firefox</a>
    </p>
    
    <p>These links will <b>not</b> get a popup:</p>
    <p>
      <a class='red' href='http://www.opera.com/'>Opera</a>
      &nbsp;|&nbsp;
      <a class='blue' href='http://www.mozilla.com/firefox/'>Firefox</a>
    </p>
    
    </body>
    </html>

  3. #3
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're the man. Great code.

    Is there anyway to make the pop up jump to the front, so it is in front of the page you are visiting?

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does... on the first click. If you then hit the 'back' button and click again, then Opera and IE do focus the popup, but FF doesn't seem to (but FF does on the first click). At least that's the way it works for me :-)

  5. #5
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well...actually the link I am exiting the site with was target="_blank", so the exit links open in a new window with the pop up behind it.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So now we've got 3 windows?

  7. #7
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, but its not what you think. Its not a pop up fest. There is good reason for this. I even advise that the person allow pop ups for this action. Is there any way to load the pop up in the bg and then make it jump to the front? I think I have seen that from pop under programs before.

    I am also seeing that if you open the link in a new tab or right click and select open in new window that there is no pop up... any ideas?
    Last edited by cluelessphp; Sep 29, 2006 at 00:41.

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well... you could make them Javascript-only links:

    <span onclick='doStuff()'>Click me!</span>

    But now it is totally inaccessible without Js enabled. And also, todays browsers give the user an option to not allow unrequested new windows (popups).

    Perhaps there's a different solution that doesn't involve controlling the user's UI to such an extent? Wanna give us a link to your page?

  9. #9
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There really is no other way to do it. They need the information in the pop up window to continue browsing.


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
  •