通过偏移计算居中在非webkit浏览器中不起作用

Centering via offset math doesn't work in non-webkit browsers

本文关键字：浏览器 不起作用 webkit 计算      更新时间：2023-09-26

代码:http://jsfiddle.net/LPF85/6/

在FF, IE7和IE9(我测试过的唯一不运行WebKit的浏览器)中，似乎左属性总是设置为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似乎没有做任何事情在这里，我很好，因为左边的数学应该跨所有浏览器工作，对吧?(It 是只是数学)

facebox/lightbox的目标是水平和垂直居中

为什么要用程序计算位置呢?如果用户调整页面的大小呢?这在纯CSS中很容易做到。

我真的不明白你的jsFiddle(或者我没有看到同样的事情?)所以我只给你这个脚本:http://jsfiddle.net/minitech/8U4Ke/，可以修改，但你喜欢。这是评论。;)

现在很容易隐藏和显示-隐藏，淡出.overlay。为了显示，把它淡入。要更改内容，请替换.popup中的HTML。可以随意添加关闭框等。

相关文章：