Question

我需要调整在blockUI中显示为消息的div的大小，以便它填充可见屏幕区域，减少一些硬编码的软糖因子（所以宽度 - 100说）。前提是我可以在屏幕上显示较小的图像，但如果用户需要放大的图像，那么我只是将它们显示为与屏幕大小对齐的块对话框。

图像是动态生成的，因此可以根据应用程序传递给它的任何尺寸进行调整。

我看过并且只找到了以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（）;

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

2 个答案: