Redimensionnement d'une div lors du redimensionnement page

Question

J'utilise jquery pour placer une superposition sur une div pendant que j'attends que mon serveur retourne à ma table json à laquelle je m'approche automatiquement (il y a deux onglets, quand vous faites un ajax post sur un, une table est créée en utilisant les données JSON de la réponse du serveur).

Cela semble fonctionner correctement.
Toutefois, lorsque je redimensionne mon écran, la superposition reste de la même taille.
Ce n'est pas bon.

Cette div superposée doit être redimensionnée lorsque quelqu'un rétrécit ou agrandit la fenêtre.
J'ai essayé plusieurs choses, y compris poster ici pour empiler un débordement.

En outre, j'ai essayé de joindre la taille de ma superposition div à une fonction $(window).resize à l'intérieur de ma fonction de superposition.

Fondamentalement, le réglage top, left, width et height aux attributs css div.outerWidth(), outerHeight(), left, top propriétés.

Cela ne semble pas fonctionner.

Des idées?

CODE pour ce que je fais

 $('<div id="overlay">').css({ 
     position: 'absolute', 
     opacity: 0.2, 
     top : $div.offset().top, 
     left : $div.offset().left, 
     width : $div.offset().width, 
     height : $div.outerHeight(), 
     background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center' 
    }).hide().appendTo('body'); 

Comme vous pouvez le voir, je faire à peu près tout mon travail css intérieur d'une fonction javascript. Je suppose que je pourrais faire toutes les choses css dans une feuille de style comme vous le suggérez et juste ajouter et cacher ma div au DOM. Je vais essayer.

Answer 1

Bonne réponse compagnon de pile Amateurs de débordement. J'ai récemment résolu le problème en attachant simplement la superposition à la div correcte au lieu d'essayer de superposer sur ce div et ensuite calculer la taille ... Voici ce que j'ai fait. Il y a un changement subtil que je signalerai.

function MRNSearchInternals() 
{ 
    //debugger; 
    var form = $("#MRNSearch"); 
    $div = $("#TabView1"); 
    var srlzdform = form.serialize(); 
    var PopID = <% =PopID %>; 
    var options = []; 
    var $url = $("#target").attr("action"); 
    $('<div id="overlay">').css({ 
     position: 'absolute', 
     opacity: 0.2, 
     top : $div.offset().top, 
     left : $div.offset().left, 
     width : $div.outerWidth(), 
     height : $div.outerHeight(), 
     background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center' 
    }).hide().appendTo($div);  

    $("#overlay").fadeIn(); 
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {     
     DisplayDemographicSearch(data); 
     $("#overlay").fadeOut('slow', function() { 
      $("#overlay").remove(); 
     }); 
    }); 
} 

Auparavant, j'ai joint le div overlay à 'body'. Maintenant, je l'attache à la div que j'ai précédemment saisi ... $ div ... Je sais pourquoi cela a fonctionné, mais la superposition se développe et rétrécit avec la taille de la fenêtre. Un aperçu de ce gars? Ce serait génial de ne pas avoir résolu ce problème, mais j'aimerais savoir pourquoi le problème a été résolu pour que je puisse prendre une décision plus éclairée la prochaine fois. Merci pour tous vos commentaires.

Answer 2

Utilisez width: 100%; et height: 100%; sur la division de superposition.

La largeur n'est pas un problème, fonctionnera comme elle est.
La hauteur est légèrement plus difficile, pour que cela fonctionne, vous devez avoir le parent de la div overlay, pour avoir une largeur connue. Donc, en supposant que la div overlay est un enfant direct de body les éléments suivants seront requis:

html, body { 
    height: 100%; 
} 

puis sur la div overlay.

---

Une autre possibilité est de définir ce qui suit sur la div:

.overlay { 
    position: fixed; 
    background: rgba(0,0,0,0.2); 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
} 

Here's an Example

Notez que position: fixed ne fonctionne pas bien avec les appareils mobiles.

Answer 3

Que diriez-vous d'une solution HTML/CSS pure?

<div id="overlay"></div> 

<style type="text/css"> 
    #overlay { 
     position: fixed; 
     left: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 

     background: #000000; 
     background: rgba(0, 0, 0, 0.5); 
    } 
</style> 

(La background propriété est spécifiée deux fois pour les appareils avec et sans support CSS3, seule manifestation.)

Answer 4

pour la superposition: le mettre à la racine du DOM, où vous n'utilisez pas overflow: hidden, par exemple après la balise body

body: position: relative 
overlay: position: absolute, width: 100%, top:0, left: 0 

et script pour la hauteur:

$('overlay-selector').height($(document).height()) 

100 % height avec CSS signifie $ (window) .height(), vous devez donc utiliser un script.