我已经制作了将 div 置于浏览器窗口中心的脚本,我的问题是:
脚本在加载内容之前采用 overlay_window 的宽度和高度,因此它像 1px x 1px 元素一样将 div 居中,在此之后它立即加载内容,我不知道如何防止这种情况发生。
有人可以帮助我吗?
这里是代码:
$(document).ready( function(){
$('.cod').click(function() {
var div_name = $(this).attr('id');
$('.overlay_window').load('/templates/' + div_name + '_template.php');
var div_width = $('#'+div_name+'-overlay').width();
var div_height = $('#'+div_name+'-overlay').height();
$('.overlay_window').css("width", ""+div_width+"px")
$('.overlay_window').css("height", ""+div_height+"px")
var div2_width = $('.overlay_window').width();
var div2_height = $('.overlay_window').height();
var window_width = $(window).width();
var window_height = $(window).height();
var widthoffset = (window_width - div2_width) / 2;
var heightoffset = (window_height - div2_height) / 2;
$('.overlay_window').css("left", "" + (widthoffset-div_width) + "px");
$('.overlay_window').css("top", "" + (heightoffset-div_height) + "px");
$('.overlay_background').fadeIn();
$('.overlay_window').fadeIn();
});
});
和 CSS:
div.overlay_window{
background:#ffffff;
width:auto;
height:auto;
position:absolute;
z-index:200;
top:0;
left:0;
}
最佳答案
从 .load(url, completed) 加载数据时更改样式功能。您简单地要求加载页面,并在加载时更改样式。
$(document).ready( function(){
$('.cod').click(function() {
var div_name = $(this).attr('id');
$('.overlay_window').load('/templates/' + div_name + '_template.php'**, function(){
var div_width = $('#'+div_name+'-overlay').width();
var div_height = $('#'+div_name+'-overlay').height();
$('.overlay_window').css("width", ""+div_width+"px")
$('.overlay_window').css("height", ""+div_height+"px")
var div2_width = $('.overlay_window').width();
var div2_height = $('.overlay_window').height();
var window_width = $(window).width();
var window_height = $(window).height();
var widthoffset = (window_width - div2_width) / 2;
var heightoffset = (window_height - div2_height) / 2;
$('.overlay_window').css("left", "" + (widthoffset-div_width) + "px");
$('.overlay_window').css("top", "" + (heightoffset-div_height) + "px");
$('.overlay_background, .overlay_window').fadeIn();
});
});
});
关于jquery - 我的 jQuery 在加载内容之前获取元素的宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13750036/