전체 창에서 jquery 사용자 모달 대화 상자 표시

Question

iframe을 포함하여 여러 요소가 포함 된 모달 대화 상자를 표시하려고합니다. 이 대화 상자가 창 너비와 높이의 약 90 %를 점유하도록합니다. 마크 업은 다음과 유사합니다.

<div id="dialog"> 
    <div>Header information</div> 
    <iframe></iframe> 
</div> 

어떻게해야합니까? jquery UI 대화 상자를 사용할 때 대화 상자 옵션이나 클래스를 통해 너비와 높이를 지정하더라도 jquery가 요소에 지정하는 인라인 스타일에 의해 재정의됩니다.

Answer 1

이 작업은 창 크기를 결정한 다음 적절하게 대화 상자 너비와 iframe 높이를 설정하여 수행했습니다. 다음 코드는 좋지 않을 수도 있지만 작동하고 폭과 높이를 윈도우보다 작은 백분율로 쉽게 변경할 수 있습니다.

var dlg = $("#dialog"); // Get the dialog container. 
// Get the window dimensions. 
var width = $(window).width(); 
var height = $(window).height(); 

// Provide some space between the window edges. 
width = width - 50; 
height = height - 150; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc. 

// Set the iframe height. 
$(dlg.children("iframe").get(0)).css("height", height + "px"); 

dlg.dialog({ 
    modal: true, 
    height: "auto", // Set the height to auto so that it grows along with the iframe. 
    width: width 
});