Как авторизовать диалог blockui доступной видимой области с помощью JQuery?

Question

Мне нужно изменить размер div, показанного как сообщение в блочном модуле, так что он заполняет видимую площадь экрана меньше некоторого жестко закодированного коэффициента выдумки (так говорят ширина - 100). Предпосылка заключается в том, что я могу показать меньшее изображение на экране, но если пользователю требуется увеличенное изображение, я просто покажу им, что размер блока ui зависит от размера экрана.

Изображение динамически генерируется, поэтому его размер может быть доведен до любых измерений, передаваемых ему из приложения.

Я искал и нашел код для центрирования div. Я работаю над этим, так что если я найти ответ, я выложу его здесь (если он не размножается никому ELSES ответы!)

Вот очень простой фрагмент кода HTML для вызова разметке:

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

А вот всплывающее окно разметки

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

Я использую JQuery, вот текущий код у меня есть:

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

Мне также нужно выяснить, как установить высоту popupcontent для автоматического заполнения текущего доступного пространства (я использую ems в моем css), но я не уверен, что это отдельный вопрос :).

Спасибо :)

Answer 1

У меня сейчас работает. Я использовал методы ширины и высоты окна, как описано выше. Код предполагает некоторые номера выдумки, чтобы заставить его работать :).

Обратите внимание, что я зажимаю максимальную ширину и высоту. Что-то, что я собираюсь переместить в динамическое поколение изображений, поэтому я не потребляю слишком много ресурсов.

Также обратите внимание, что я не включил код для передачи новых измерений в приложение динамического изображения, я решил, что это будет индивидуально для каждой отдельной реализации.

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

Вы сможете только по размеру диалоговое окно до размера окна не на экране.

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