代码:http://jsfiddle.net/LPF85/6/
在FF,IE7和IE9(我测试过的唯一不运行WebKit的浏览器)中,似乎left属性始终设置为0
,或者在IE情况下设置为负。
我的定位代码全部基于文档的尺寸。
function open_img_in_face_box(id, width){
max_width = $j(document).width();
max_height = $j(document).height();
padding = 150;
passed_width = width || (max_width - (2 * padding));
var img = $j('#' + id);
dom_img = document.getElementById(id);
$j(document).bind('reveal.facebox', function() {
$j("#facebox .image img").width(passed_width);
})
// display
jQuery.facebox({
image: img.attr('src')
});
// center and adjust size
var aspect_ratio = img.width() / img.height();
var img_width = passed_width;
var img_height = passed_width / aspect_ratio;
window_center_y = max_height / 2;
window_center_x = max_width / 2;
offset_y = window_center_y - (img_height / 2);
offset_x = window_center_x - (img_width / 2);
var fbx = $j('#facebox');
fbx.css('position', 'absolute');
fbx.css('left', offset_x + 'px !important');
fbx.css('top', offset_y + 'px !important');
fbx.css('margin-left', 'auto');
fbx.css('margin-right', 'auto');
}
margin-left
和margin-right
在这里似乎什么也没做,我很好,因为左数学应该在所有浏览器上都可以,对吗? (这只是数学)面盒/灯箱的目标是水平和垂直居中。
最佳答案
您为什么还要以编程方式首先计算位置?如果用户调整页面大小怎么办?这可以在纯CSS中轻松完成。
我不太了解您的jsFiddle(或者我看不到相同的东西吗?),所以我只给您提供以下脚本:http://jsfiddle.net/minitech/8U4Ke/可以随意更改。有评论。 ;)
现在,隐藏和显示很容易-隐藏,淡出.overlay
。要显示,请淡入。要更改内容,请替换.popup
中的HTML。添加关闭框,然后随意添加。
关于javascript - 通过偏移量算术居中在非Webkit浏览器中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6947976/