title: Javascript popup window not working
body: <p>I manage a site that I did not build. The site features some links, where you can click the link, and a modal window opens with content from a different html file. It used to work, and now it doesn't.</p>
  
  <p>I have compared all the relevant files between now and when I took over the site, but do not see any changes that would have affected this.</p>
  
  <p>The popup windows are called thusly:</p>
  
  <pre><code>&lt;?php bioLinkText('Daniel Jones', 'Read more about Dr. Jones'); ?&gt;&lt;/p&gt;
  </code></pre>
  
  <p>The page it should open is /bios/daniel-jones.html</p>
  
  <p>From the functions.php file:</p>
  
  <pre><code>function bioLinkText($name,$text) {
  $name = strtolower(str_replace(" ","-",$name));
  echo '&lt;a href="/bios/'.$name.'.html" class="popUp"&gt;'.$text.'&lt;/a&gt;';}
  </code></pre>
  
  <p>This part functions OK. But it used to create a modal window, and now, it just opens the link like a regular link.</p>
  
  <p>From the global.js file:</p>
  
  <pre><code> // AJAX Popups
      function popUp(page,randId) {
          $('body').append(
          '&lt;div id="'+randId+'" class="pWin" style="display:none;position:fixed"&gt;'+
              '&lt;span class="pHead"&gt;'+
                  '&lt;a href="'+page+'" target="_blank"&gt;Open in new window&lt;/a&gt;'+
                  '&lt;span class="pClose"&gt;X&lt;/span&gt;'+
              '&lt;/span&gt;'+
              '&lt;div class="pBod"&gt;&lt;/div&gt;'+
          '&lt;/div&gt;'
          );
  
          var top = (h/2) - 150;
          var left = (w/2) - 300;
  
          $('#'+randId+'.pWin').addClass('large').css({top:top+'px',left:left+'px'});
          $('#'+randId+' .pBod').html('&lt;img src="/images/loading.gif" alt="loading"/&gt;').load(page+' #content', function() {
              $('.pWin').show(300);
              $('.pBod #content').find('img').filter('#portrait').attr('src', function(index, src) {
                  return '/bios/' + src;
              });
          });
  
      }
  
      $('.popUp').click(function() {
          var randId = randomString();
          var num = $('.pWin').length;
          if (num &lt; 5) {
              var page = $(this).attr('href');
              popUp(page,randId);
              $('#'+randId+'.pWin').draggable({handle:'.pHead'}).resizable({alsoResize:'#'+randId+' .pBod', minWidth: 320, minHeight: 280, maxWidth: 800, maxHeight: 600});
          }
          return false;
  
      });
  
      function pClose(btn) {
          var pWin = btn.closest('.pWin');
          pWin.hide(200, function() { pWin.remove(); });
      }
      $('.pClose').live('click',function() {
          var btn = $(this);
          pClose(btn);
      });
      $(document).keyup(function(e) {
        if (e.keyCode == 27) {
              $('.pWin').hide(200, function() { $('.pWin').remove(); });
        }
      });
  </code></pre>
  
  <p>From the style.css file:</p>
  
  <pre><code>.popUp, .pHead a { padding-right: 16px; background: url(/images/external.gif) 100% 50% no-repeat; }
  
  .popUp.noBg { background:none; padding-right:0; }
  </code></pre>
  
  <p>I have been trying to figure this out for 10+ hours. Any help would be greatly appreciated. The one thing is...I don't understand how the javascript function popUp would be invoked. Is that the missing ingredient?</p>