3

我需要调整在 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();
    });
});

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

谢谢 ：）

4

2 回答 2

2

我已经让它工作了。我已经使用了上面描述的窗口宽度和高度方法。该代码假设一些软糖数字纯粹是为了使其工作:)。

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

另请注意，我没有包含将新维度传递给动态图像应用程序的代码，我认为这对每个单独的实现都是自定义的。

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

    });
于 2009-03-10T14:21:26.170 回答
0

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

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

于 2009-03-10T13:50:42.920 回答