La fenêtre popup Javascript ne fonctionne pas

Question

Je gère un site que je n'ai pas construit. Le site comporte des liens, où vous pouvez cliquer sur le lien, et une fenêtre modale s'ouvre avec le contenu d'un fichier html différent. Cela fonctionnait, et maintenant non.

J'ai comparé tous les fichiers pertinents entre maintenant et quand j'ai repris le site, mais je ne vois aucun changement qui aurait affecté cela.

Les fenêtres pop-up sont appelés ainsi:

<?php bioLinkText('Daniel Jones', 'Read more about Dr. Jones'); ?></p> 

La page devrait ouvrir est /bios/daniel-jones.html

A partir du fichier functions.php:

function bioLinkText($name,$text) { 
$name = strtolower(str_replace(" ","-",$name)); 
echo '<a href="/bios/'.$name.'.html" class="popUp">'.$text.'</a>';} 

Cette partie fonctionne bien. Mais il créait une fenêtre modale, et maintenant, il ouvre juste le lien comme un lien normal.

à partir du fichier global.js:

// AJAX Popups 
    function popUp(page,randId) { 
     $('body').append(
     '<div id="'+randId+'" class="pWin" style="display:none;position:fixed">'+ 
      '<span class="pHead">'+ 
       '<a href="'+page+'" target="_blank">Open in new window</a>'+ 
       '<span class="pClose">X</span>'+ 
      '</span>'+ 
      '<div class="pBod"></div>'+ 
     '</div>' 
     ); 

     var top = (h/2) - 150; 
     var left = (w/2) - 300; 

     $('#'+randId+'.pWin').addClass('large').css({top:top+'px',left:left+'px'}); 
     $('#'+randId+' .pBod').html('<img src="/images/loading.gif" alt="loading"/>').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 < 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(); }); 
     } 
    }); 

A partir du fichier style.css:

.popUp, .pHead a { padding-right: 16px; background: url(/images/external.gif) 100% 50% no-repeat; } 

.popUp.noBg { background:none; padding-right:0; } 

J'ai essayé de comprendre cela pour de 10 heures. Toute aide serait grandement appréciée. La seule chose est ... Je ne comprends pas comment la fonction javascript popUp serait invoquée. Est-ce l'ingrédient manquant?

Answer 1

Essayez ceci:

//Make sure the DOM is ready (If you call this function before '.popUp' exists, it wont be matched, and the '.click' handler wont be added. 
$(document).ready(function() { 

    $('.popUp').click(function(e) { 
     //Prevent the default action (Clicking the button) 
     e.preventDefault(); 
     //..Your code here 
    }); 
}); 

Answer 2

Eh bien, je compris. J'ai changé la fonction, l'ajout d'un onclick = "pop-up()" à la propriété a href, et maintenant il fonctionne:

function bioLinkText($name,$text) { 
$name = strtolower(str_replace(" ","-",$name)); 
echo '<a href="/bios/'.$name.'.html" onclick="popup()" class="popUp">'.$text.'</a>'; 

}