javascript - 弹出 block - jQuery

Question

我希望页面内的容器在事件时占据页面的整个宽度并覆盖在其他所有内容上。这是我目前所拥有的，但它没有按我想要的方式工作:

$(function() {
    $('.main a').click( function() {
        var href = $(this).attr('href');
        $(href).animate({
            width: [940, 'swing'],
            height: [500, 'swing'],
            opacity: 'toggle'
        }, 500, 'linear');
        return false;
    });
});

http://jsbin.com/anoji4/2/edit

谢谢

Answer 1

你应该通过 CSS 设置

position:absolute;
z-index: 10; /* or higher */
top: 0;
left: 0;

到你的可扩展div

当您打开它们时，您可以使用

设置高度和宽度

$(href).animate({
      width: [$('body').width(), 'swing'],
      height: [$('body').height(), 'swing'],
      opacity: 'toggle'
}, 500, 'linear');

或者像您一样使用 $('html') 或静态大小代替 $('body')