叠加的位置是页面的右下角

Question

jsfiddle 中的示例运行良好。但是在我的页面上，叠加层出现在右下角，而不是中心。谁能告诉我需要更改哪些部分才能将叠加层放置在中心？我已经尝试过引导覆盖，但这与当前的 js 版本冲突，所以我认为这个解决方案会更好，我在 jsfiddle 上找到了。我还没有将它作为移动设备等上的响应功能进行测试，但如果有人发现任何可能在移动设备和平板电脑、其他操作系统上损坏的东西，那就太好了。谢谢这是http://jsfiddle.net/istvanv/uQj7t/28/下面的小提琴链接和代码

css

 a#overlaylaunch-inAbox {
display: block;
padding: 40px;
margin: 40px;
background-color: #efefef;
font-size: 1.6em;
text-decoration: none;
text-align: center;
}

#overlay-inAbox .wrapper {
 text-align: center;
}


/* More important stuff */

.overlay,
#overlay-shade {
display: none;
}

#overlay-shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #000;
 }

.overlay {
position: absolute;
top: 500px;
left: 0;
width: 450px;
min-height: 500px;
z-index: 100;
background-color: #7D7D7D;
border: 10px solid #CFCFCF;
color: #fff;
box-shadow: 0 0 16px #000;
} .ie7 .overlay {
height: 200px;
} .overlay .wrapper {
padding: 15px 30px 30px;
}


.overlay .toolbar {
padding: 8px;
line-height: 1;
text-align: right;
overflow: hidden;
} .overlay .toolbar a.close {
display: inline-block;
    *display: inline;
     zoom: 1;
padding: 0 8px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
line-height: 18px;
border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
color: #999999;
background-color: #515151;
 } .overlay .toolbar a.close span {
color: #818181;
} .overlay .toolbar a.close:hover,
.overlay .toolbar a.close:hover span {
background-color: #b90900;
color: #fff;
}

js

     function openOverlay(olEl) {
    $oLay = $(olEl);

    if ($('#overlay-shade').length == 0)
        $('body').prepend('<div id="overlay-shade"></div>');

    $('#overlay-shade').fadeTo(300, 0.6, function() {
        var props = {
            oLayWidth       : $oLay.width(),
            scrTop          : $(window).scrollTop(),
            viewPortWidth   : $(window).width()
        };

        var leftPos = (props.viewPortWidth - props.oLayWidth) / 2;

        $oLay
            .css({
                display : 'block',
                opacity : 0,
                top : '-=300',
                left : leftPos+'px'
            })
            .animate({
                top : props.scrTop + 40,
                opacity : 1
            }, 600);
    });
}

function closeOverlay() {
    $('.overlay').animate({
        top : '-=300',
        opacity : 0
    }, 400, function() {
        $('#overlay-shade').fadeOut(300);
        $(this).css('display','none');
    });
}

$('#overlay-shade, .overlay a').live('click', function(e) {
    closeOverlay();
    if ($(this).attr('href') == '#') e.preventDefault();
});


// Usage
$('#overlaylaunch-inAbox').click(function(e) {
   openOverlay('#overlay-inAbox');
   e.preventDefault();
});

html

    <div id="overlay-inAbox" class="overlay">
<div class="toolbar"><a class="close" href="#"><span>x</span> close</a></div>
<div class="wrapper">
    Hello! I'm in a box.
</div>

启动它！

Answer 1

您可以使用transform，它以您想要的一切为中心，而无需考虑其尺寸。

 .overlay {
     position: fixed;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%); /* ie9 */
     -webkit-transform: translate(-50%, -50%); /* safari iOS - older androids */
     transform: translate(-50%, -50%); /* all browsers */
 }

仅此而已。将其应用于您需要居中尊重父级的所有 div。这个框是fixed 位置所以父是body 标记。

请注意，您不需要 javascript 计算，因此您可以删除它们并仅使用 css 应用。

编辑

正如我在 cmets 中所说，看看这个带有 3 个 div 的小提琴，它们完全居中，但不知道它们的尺寸如何。请注意，没有任何 javascript 可以进行计算。

http://jsfiddle.net/11oes0rf/

编辑 2

要保留初始代码中的顶部动画，您必须使用 jquery 指定百分比。所以小提琴是这样的：

http://jsfiddle.net/uQj7t/1363/

代码是这样的：

$oLay
    .css({
    display : 'block',
    top : '-50%',
    opacity : 0
})
    .animate({
    opacity : 1,
    top: '50%'
}, 600);

更接近：

function closeOverlay() {
    $('.overlay').animate({
        top: '-50%',
        opacity : 0
    }, 400, function() {
        $('#overlay-shade').fadeOut(300);
        $(this).css('display','none');
    });
}