[英]Javascript popup window not working
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.
该站点具有一些链接,您可以在其中单击链接,然后将打开一个模式窗口,其中包含来自其他html文件的内容。 It used to work, and now it doesn't.
它曾经可以工作,现在却不起作用。
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. 我已经比较了从现在到接管该站点之间的所有相关文件,但是看不到会影响到此的任何更改。
The popup windows are called thusly: 弹出窗口因此被调用:
<?php bioLinkText('Daniel Jones', 'Read more about Dr. Jones'); ?></p>
The page it should open is /bios/daniel-jones.html 它应该打开的页面是/bios/daniel-jones.html
From the functions.php file: 从functions.php文件中:
function bioLinkText($name,$text) {
$name = strtolower(str_replace(" ","-",$name));
echo '<a href="/bios/'.$name.'.html" class="popUp">'.$text.'</a>';}
This part functions OK. 这部分功能正常。 But it used to create a modal window, and now, it just opens the link like a regular link.
但是它曾经用来创建模式窗口,现在,它像常规链接一样打开链接。
From the global.js file: 从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(); });
}
});
From the style.css file: 从style.css文件中:
.popUp, .pHead a { padding-right: 16px; background: url(/images/external.gif) 100% 50% no-repeat; }
.popUp.noBg { background:none; padding-right:0; }
I have been trying to figure this out for 10+ hours. 我已经尝试解决了10多个小时。 Any help would be greatly appreciated.
任何帮助将不胜感激。 The one thing is...I don't understand how the javascript function popUp would be invoked.
一件事是...我不明白如何调用javascript函数popUp。 Is that the missing ingredient?
那是缺少的成分吗?
Try this: 尝试这个:
//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
});
});
Well, I figured it out. 好吧,我知道了。 I changed the function, adding an onclick="popup()" property to the a href, and now it works:
我更改了功能,在a href中添加了onclick =“ popup()”属性,现在可以使用了:
function bioLinkText($name,$text) {
$name = strtolower(str_replace(" ","-",$name));
echo '<a href="/bios/'.$name.'.html" onclick="popup()" class="popUp">'.$text.'</a>';
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.