jQuery 대화 상자 동적 높이

Question

jQuery UI 대화 상자 높이를 내용에 따라 동적으로 변경하는 방법을 찾고 있습니다.

$("#dialog-modal_"+productID).html("<iframe src='index.php?act=showProduct&amp;id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>"); 

$("#dialog-modal_"+productID).dialog(
{ 
    width: 810, 
    height: 590, 
    resizable: false, 
    modal: true, 
    open: function(event, ui) 
    { 
    } 
}); 

그렇게 어쨌든 거기 : 여기

내 코드?

Answer 1

높이를 "auto"으로 변경하십시오. 자세한 내용은 http://api.jqueryui.com/dialog/#option-height을 참조하십시오.

Answer 2

예제는 상대 경로에서 나옵니다. iframe 문서의 .height()를 가져올 수 있어야합니다.

그러나 iframe을 먼저 렌더링하고 브라우저 문서 높이를 얻으려면 몇 가지 CSS 속임수를 적용한 다음 해당 값을 컨테이너에 적용한 다음 컨테이너 표면을 그려야합니다. 일단 새로운 높이가 설정됩니다. 여기에서 가져온

뭔가 같은 ...

: 다음

var doc=document.getElementById("frame").contentDocument; 

// Earlier versions of IE or IE8+ where !DOCTYPE is not specified 
var doc=document.getElementById("frame").contentWindow.document; 

은 물론 이것은 당신이 도출 한 근거에 의존하는 것

var iframeDocHeight = $(doc).height(); // assuming it is displayed 
$("#dialog-modal_"+productID).css("height", iframeDocHeight); 

방법 (주어진 페이지 프레임 워크의 나머지 부분)를 사용하여 iframe을 즉시 표시하지 않고 렌더링 할 수 있습니다.

나는 이것을 달성하기 위해 position:absolute과 visibility:hidden의 조합을 제안하고 몇 가지 j 마법을 제안합니다. 완전한 렌더링 된 HTML 문서가 없으면 이미 게시 한 것 이상의 절대 경로를 제안하는 것이 유용하지 않습니다.

는 기본적으로 overflow:hidden;display:block;height0px; 인 요소에 iframe을 캡슐화하지만, 완전히 (이 숨겨집니다) iframe이 다음을 검사하고 필요한

로

행운을 빕니다 측정을 렌더링하자!