Wie kann ich einen Blockui-Dialog mit JQuery auf den verfügbaren sichtbaren Bereich anpassen?

Question

Ich muss eine Größe ändern, die als eine Nachricht in BlockUI angezeigt wird, so dass es den sichtbaren Bildschirmbereich abzüglich einiger hardcoded Fudge-Faktor füllt (also Breite - 100 sagen). Die Voraussetzung ist, dass ich ein kleineres Bild auf dem Bildschirm zeigen kann, aber wenn der Benutzer ein vergrößertes Bild benötigt, dann zeige ich ihnen einfach Block ui Dialoggröße auf ihrem Bildschirm.

Das Bild wird dynamisch generiert, so dass die Größe an alle Dimensionen angepasst werden kann, die an die Anwendung übergeben werden.

Ich habe gesucht und habe nur Code zum Zentrieren eines div gefunden. Ich bin daran arbeiten so, wenn ich eine Antwort zu finden Ich werde es hier posten (vorausgesetzt, es nicht jemand elses Antworten repliziert!)

Hier ist ein sehr einfaches HTML für den anrufenden Markup-Snippet:

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

Und hier ist das Pop-up-Markup

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

ich bin mit JQuery, hier ist der aktuelle Code ich habe:

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(); 
    }); 
}); 

Ich muss auch herausfinden, wie man die Popup-Höhe einstellen kann, um den aktuell verfügbaren Platz automatisch zu füllen (ich benutze ems in meinem CSS), aber ich bin mir nicht sicher, ob das eine separate Frage ist :).

Thanks :)

Answer 1

Ich habe es jetzt funktioniert. Ich habe die Methoden Fensterbreite und -höhe wie oben beschrieben verwendet. Der Code nimmt einige Fudge-Nummern rein, um es funktionieren zu lassen :).

Beachten Sie, dass ich die maximale Breite und Höhe festklammern. Etwas, das ich in meine dynamische Bilderzeugung verschieben werde, damit ich nicht zu viele Ressourcen verwende.

Beachten Sie auch, dass ich den Code nicht hinzugefügt habe, um die neuen Dimensionen an die dynamische Bild-App zu übergeben. Ich dachte mir, dass dies für jede einzelne Implementierung individuell wäre.

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

Sie werden nur der Dialog auf die Größe des Fensters nicht der Bildschirm Größe können.

$ (window) .width(); $ (Fenster) .height();