jQuery对齐方式-相对于浏览器窗口

jQuery Alignment - Relative to Browser Window?

本文关键字：浏览器 窗口 相对于 对齐 方式 jQuery      更新时间：2023-09-26

在各种网站的帮助下，我使用javascript创建了一个非常简单的弹出框，其中包含我的联系信息。我对它的工作方式很满意，除了出现的弹出窗口是绝对定位的，我希望它相对于浏览器窗口出现（即，我希望弹出窗口出现在浏览器窗口的中心，无论你点击信息图标时在页面上的什么位置）。

我对HTML很熟悉，但对javascript不熟悉。我知道相对定位在javascript中的工作方式非常不同，但我不知道如何解决这个问题。如有任何建议，我们将不胜感激。

网页在这里：http://www.thirstlabmedia.com/

脚本如下：

<script type="text/javascript">
function toggle( div_id ) {
    var el = document.getElementById( div_id );
    if( el.style.display == 'none' ) {
        el.style.display = 'block';
    }
    else {
        el.style.display = 'none';
    }
}
function blanket_size( popUpDivVar ) {
    if( typeof window.innerWidth != 'undefined' ) {
        viewportheight = window.innerHeight;
    }
    else {
        viewportheight = document.documentElement.clientHeight;
    }
    if( ( viewportheight > document.body.parentNode.scrollHeight ) && ( viewportheight > document.body.parentNode.clientHeight ) ) {
        blanket_height = viewportheight;
    }
    else {
        if( document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight ) {
            blanket_height = document.body.parentNode.clientHeight;
        }
        else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById( 'blanket' );
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById( popUpDivVar );
    popUpDiv_height = window.innerHeight / 2 - 200;
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos( popUpDivVar ) {
    if( typeof window.innerWidth != 'undefined' ) {
        viewportwidth = window.innerHeight;
    }
    else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if( ( viewportwidth > document.body.parentNode.scrollWidth ) && ( viewportwidth > document.body.parentNode.clientWidth ) ) {
        window_width = viewportwidth;
    }
    else {
        if( document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth ) {
            window_width = document.body.parentNode.clientWidth;
        }
        else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById( popUpDivVar );
    window_width = window_width / 2 - 200;
    popUpDiv.style.left = window_width + 'px';
}
function popup( windowname ) {
    blanket_size( windowname );
    window_pos( windowname );
    toggle( 'blanket' );
    toggle( windowname );
}
</script>

（我很抱歉把所有内容都放在一行；该网站是通过Cargo Collective创建的，除非所有内容都在一行，否则它不接受脚本）。

使用CSS position : fixed:

#my-element {
    position : fixed;
    top      : 50%;
    left     : 50%;
    margin   : -100px 0 0 -250px;
    width    : 500px;
    height   : 200px;
    z-index  : 1000;
}

下面是一个演示：http://jsfiddle.net/huRcV/1/

这将使500x200px元素在viewport中居中。负边距用于使元素相对于其尺寸居中。如果用户滚动页面，则元素将保持在viewport的中心。

position的文档：https://developer.mozilla.org/en/CSS/position

固定的

不要为元素留出空间。相反，将其定位在相对于屏幕视口的指定位置，并且不移动当滚动时。打印时，将其放置在每一页。

可以使用JavaScript实现这一点，但最好使用CSS版本。如果你真的想使用jQuery，这里有一个快速的例子：

var $myElement = $('#my-element');
$(window).on('scroll resize', function () {
    $myElement.css({
        top : ($(this).scrollTop() + ($(this).height() / 2)),
    });
});

下面是一个演示：http://jsfiddle.net/huRcV/（注意，本演示中position : fixed已更改为position : absolute）

相关文章：