Comment auto-dimensionner une boîte de dialogue blockui dans la zone visible disponible avec JQuery?

Question

J'ai besoin de redimensionner une div montrée comme un message dans blockUI de sorte qu'elle remplisse la zone de l'écran visible moins un facteur de fudge codé en dur (donc width - 100). La prémisse est que je peux montrer une plus petite image sur l'écran mais si l'utilisateur a besoin d'une image agrandie alors je leur montre juste la boîte de dialogue de taille d'ui à leur écran.

L'image est générée dynamiquement et peut être dimensionnée en fonction des dimensions qui lui sont transmises par l'application.

J'ai regardé et j'ai seulement trouvé le code pour centrer un div. Je travaille sur ce donc si je trouve une réponse que je vais le poster ici (en supposant qu'il ne se réplique pas quelqu'un elses réponses!)

est ici un html très simple extrait de code pour le balisage d'appel:

<div> 
    <img src="someurl" class="image" height="280px" width="452px" alt="" /> 
</div> 
<div style="text-align: right;"> 
    <a href="#viewpopup" id="viewpopup">View larger map</a> 
</div> 

Et voici le balisage popup

<div id="popup"> 
    <div class="titlebar"> 
     <div class="title left">Map details</div> 
     <div class="closebuttons right"><a class="close">x</a></div> 
     <div class="clearer"></div> 
    </div> 
    <div class="popupcontent"> 
    <!-- auto append content here --> 
    </div> 
    <div class="buttonbar"> 
     <a class="close">Close</a> 
    </div> 
</div> 

J'utilise JQuery, voici le code actuel je:

var popup = $("#popup"); 
var popupcontent = popup.children(".popupcontent"); 
var image = $(".image"); 
$(document).ready(function(){ 
    $("#viewpopup").click(function(){ 
     // Fudged indent on the top left corner 
     var top = 20; 
     var left = 20; 

     // Dynamically set the contents 
     // popupcontent.empty(); 
     // popupcontent.append(); 
     $.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left } }); 

    }); 

    $(".close").live("click",function(){ 
     $.unblockUI(); 
    }); 
}); 

Je dois aussi trouver comment régler la hauteur du popup pour remplir automatiquement l'espace disponible actuellement (j'utilise ems dans mon css) mais je ne sais pas si c'est une question distincte :).

Merci :)

Answer 1

Je l'ai maintenant fonctionné. J'ai utilisé les méthodes de largeur et de hauteur de la fenêtre comme décrit ci-dessus. Le code suppose quelques nombres de fudge purement pour le faire fonctionner :).

Notez que je serre la largeur et la hauteur maximales. Quelque chose que je vais passer à ma génération d'image dynamique, donc je ne consomme pas trop de ressources.

Notez également que je n'ai pas inclus le code pour transmettre les nouvelles dimensions à l'application d'image dynamique, j'ai pensé que cela serait personnalisé pour chaque implémentation individuelle.

$("#viewmap").click(function(){ 
     var width = $(window).width(); 
     if(width < 200) 
      width = 200; 
     if(width > 1200) 
      width = 1200; 

     var height = $(window).height(); 
     if(height < 200) 
      height = 200; 
     if(height > 800) 
      height = 800; 

     var popupwidth = $(window).width() - 100; 
     var popupheight = $(window).height() - 100; 
     var top = 20; 
     var left = (width - popupwidth)/2 ; 
     popup.css("width", popupwidth); 
     popup.css("height", popupheight); 
     popupcontent.css("height", popupheight - 40) ; 

     popupcontent.empty(); 
     popupcontent.append("<img src=\"someurl\" width=\""+ popupwidth + "\" height=\""+ (popupheight - 40) +"\" />"); 
     $.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left } }); 

    }); 

Answer 2

Vous ne serez en mesure de la taille de la boîte de dialogue à la taille de la fenêtre pas à l'écran.

$ (window) .width(); $ (fenêtre) .height();