Как мне автоматически изменить размер диалогового окна в доступной видимой области с помощью JQuery? - PullRequest
Новая
       10

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

3 голосов
/ 10 марта 2009

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

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

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

Вот очень простой 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();
    });
});

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

Спасибо:)

Ответы [ 2 ]

2 голосов
/ 10 марта 2009

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

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

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

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

    });
0 голосов
/ 10 марта 2009

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

$ (окно) .width (); $ (Окна) .height ();

...