jQuery가있는 가시적 인 영역에 Blockui 대화 상자를 어떻게 자동으로 선택합니까?

Question

Blockui의 메시지로 표시된 div를 크기를 조정하여 눈에 보이는 화면 영역에 일부 하드 코드 퍼지 팩터 (너비 -10 세)를 채우도록해야합니다. 전제는 화면에 작은 이미지를 표시 할 수 있지만 사용자에게 확대 된 이미지가 필요한 경우 화면에 크기가 크기가 큰 차단 대화를 표시합니다.

이미지는 동적으로 생성되므로 응용 프로그램에서 전달되는 치수로 크기를 조정할 수 있습니다.

나는 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 ();