Question

我有一个在窗口内工作的javascript社交储物柜，我在不同的屏幕上测试响应时会遇到麻烦（如移动设备等），因为窗口会改变位置。到目前为止，我知道这部分代码会影响定位，但我不知道如何。

这是CSS：

 #gatewaydiv
    {
    max-width: 15em;
    height: 6em;
    padding: 9em;
    position: absolute;
    display:none;
    background-color:#0e0f0f;

    text-align:center;
    font-family:arial;
    font-weight:bold;
    opacity:0.9;
    margin: auto;
    margin-top: -10%;
 }

这是Javascript窗口：

function setupgateway()
{
var Left = $(window).width() /2.6;
Left = Left - $('#gatewaydiv').width() / 2;

var Top = $(window).height()/2;
Top = Top - $('#gatewaydiv').height()/6;

$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');

如果有人可以请解释一下这个javascript窗口代码的行为如何，以及如何才能在所有设备上正常工作？

我已经阅读了很多类似的问题，但是没有找到我的答案，因为代码完全不同，这也不是一个弹出窗口，说实话，我不是javascript专家。 You can see the live version here

谢谢！

Answer 1

您可以使用下面的CSS使任何元素居中（垂直和水平）。例如 -

#gatewaydiv{
    position:absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 50%;
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%);
 }

请记住，您必须删除margin-top:-10%并禁用/删除Javascript。

另外，请替换此行 -

$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');

通过这一行 -

$('#gatewaydiv').css('display', 'inline');

Answer 2

也许你可以添加：

window.addEventListener('resize', setupgateway);
window.addEventListener('scroll', setupgateway);

Javascript窗口定位

2 个答案: