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

我需要调整在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>

我还需要弄清楚如何设置popupcontent的高度来自动填充当前的内容 可用空间（我在css中使用ems），但我不确定这是否是一个单独的问题：）

---

谢谢：）

您只能根据窗口大小而不是屏幕大小调整对话框的大小

$（窗口）.width（）；

---

$（window.height（）

我现在可以用了。我使用了如上所述的窗口宽度和高度方法。 代码假定一些伪造的数字纯粹是为了让它工作：）

请注意，我正在夹紧最大宽度和高度。我将移动到动态图像生成中，这样我就不会消耗太多资源

还请注意，我没有包含将新维度传递给dynamic image应用程序的代码，我认为这将是每个实现的定制

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

    });

$（“#视图映射”）。单击（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度<200）
宽度=200；
如果（宽度>1200）
宽度=1200；
var height=$（window.height（）；
如果（高度<200）
高度=200；
如果（高度>800）
高度=800；
var popuwWidth=$（窗口）.width（）-100；
var popLight=$（窗口）.height（）-100；
var-top=20；
var left=（宽度-popuwidth）/2；
css（“宽度”，popupwidth）；
css（“高度”，PopLight）；
css（“高度”，PopupLight-40）；
popupcontent.empty（）；
popupcontent.append（“”）；
$.blockUI（{消息：弹出窗口，css:{边框：无，高度：自动，光标：自动，宽度：自动，顶部：顶部，左侧：左侧}}）；
});

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

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

    });