Flyout 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;

到你的expandable-div

当你打开它们时，用

设置高度和宽度

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

或代替$（'body'）使用$（'html'）或静态大小