Question

jsfiddle中的示例工作正常。但是在我的页面上，叠加层显示在底部 - 右侧，外部视图而不是中心。任何人都可以告诉我哪些部分需要更改以在中心位置叠加？我已尝试过bootstrap overlay，但这与当前的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。

修改

正如我在评论中所说，看看这个小提琴完全集中在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');
    });
}

叠加的位置在页面右下方

1 个答案:

修改

编辑2