Javascript Jquery AJAX不加载页面,尽管页面存在
我对整个AJAX还比较陌生,目前正在编辑一个脚本,它将打开一个模式框,然后将请求的内容加载到该框中。我有以下JavascriptJavascript Jquery AJAX不加载页面,尽管页面存在,javascript,jquery,ajax,Javascript,Jquery,Ajax,我对整个AJAX还比较陌生,目前正在编辑一个脚本,它将打开一个模式框,然后将请求的内容加载到该框中。我有以下Javascript jQuery(document).ready(function($){ $('a[name=modal]').click(function(e) { e.preventDefault(); var maskHeight = $(document).height(); var maskWidth = $(window).width();
jQuery(document).ready(function($){
$('a[name=modal]').click(function(e) {
e.preventDefault();
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeTo(600,0.75);
var load_page = $(this).attr('ajax');
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
// Set the loading HTML to be displayed
var loadingHTML = '<center><img src="_img/progress_bar.gif"/></center>';
//Set the loading bar
$('#placeholder').html(loadingHTML).fadeTo(600,1);
$('#placeholder').css('top', winH/2-$('#placeholder').height()/2);
$('#placeholder').css('left', winW/2-$('#placeholder').width()/2);
// Ajax load
$('#ajax').load('_content/' + load_page + '.php', null, function(){
$('#ajax').css('top', winH/2-$('#ajax').height()/2);
$('#ajax').css('left', winW/2-$('#ajax').width()/2);
$('#ajax').fadeTo(600,1);
});
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask, #box, #ajax').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('#ajax, #placeholder').hide();
});
脚本显示加载栏,但不显示包含AJAX内容的模式框,页面确实存在于我的本地主机上。提前感谢。我认为这是因为网站找不到内容文件夹,因为它可能与javascript文件不在同一目录中。尝试../\u content,如果这不起作用,只需尝试使用整个url:…尝试更改../\u content/而不是_content/仅当您将该页面的内容按字面意思嵌入.load()调用中时,是否会显示模式对话框?var load\u page=$(this.attr('ajax');这没有意义,为什么你需要这个无效的?@JapanPro我正在使用A标记,然后它会转到“_content/beta.php”来动态加载页面。另外@JosephWeissman当我使用$('#ajax').html('Lorem ipsum')).fadeTo(600,1);
<div id="mask"></div>
<div id="placeholder"></div>
<div id="ajax"></div>
#mask
{
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 9000;
background: url("../_img/mask.png") repeat;
display: none;
overflow: hidden;
}
#placeholder
{
overflow: hidden;
opacity: 0;
position: absolute;
z-index: 9050;
overflow: hidden;
}
#ajax
{
position: absolute;
z-index: 9100;
overflow: hidden;
opacity: 0;
display: none;
}