如何使用 JQuery 将 blockui 对话框自动调整为可用的可见区域？

Question

我需要调整在 blockUI 中显示为消息的 div 的大小，以便它填充可见屏幕区域，减少一些硬编码的软糖因子（例如宽度 - 100 ）。 前提是我可以在屏幕上显示较小的图像，但如果用户需要放大的图像，那么我只需向他们显示大小适合其屏幕的块 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();
    });
});

我还必须弄清楚如何设置 popupcontent 高度以自动填充当前 可用空间（我在 CSS 中使用 ems），但我不确定这是否是一个单独的问题:)。

谢谢 ：）

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

您只能将对话框的大小调整为窗口的大小，而不能调整为屏幕的大小。

$(窗口).width();
$(窗口).height();