Flyout Block - jQuery

Question

Je veux un conteneur dans la page pour prendre toute la largeur de la page et superposer sur tout le reste, lorsqu'il est actif. Voilà ce que j'ai actuellement et son ne fonctionne pas comme je veux:

$(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

Merci

Answer 1

vous devez simplement définir via CSS

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

à votre-div extensible

et lorsque vous les ouvrez, vous définissez la hauteur et la largeur avec

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

ou au lieu de $ ('corps'), utilisez $ ('html') ou la taille statique que vous avez fait