dialog + iframe 을 이용한 팝업, 레이어

예전부터 dialog안에 iframe 넣어서 사용했었는데,

이번에 프로젝트에서 나름대로 조금 업그레이드(?)해서 공통으로 만들어 보았습니다.

파라미터는 id, url, width, height, params

dialog를 띄워서 iframe에 submit을 합니다.

$('<div id="'+id+'"><iframe name="'+id+'" src="" style="width:'+width+'px;height:'+height+'px;border:none;" frameBorder="0" /></div>').dialog({ 

autoOpen : true, 

modal : true, 

resizable : true, 

height: 'auto', 

//title : title, 

width : 'auto', 

position : { my: "center", at: "center", of: window }, 

open : function(event, ui){ 

$(this).dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();//title 삭제 

var tempForm = document.createElement("form"); 

$(tempForm).attr("action", url).attr("method", "post").attr("target", id); 

for( var paramName in params ){ 

$(tempForm).append('<input type="hidden" name="'+paramName+'" value="'+params[paramName]+'" />'); 

} 

document.body.appendChild(tempForm); 

tempForm.submit(); 

document.body.removeChild(tempForm); 

}, 

close : function(){ 

$(this).dialog('destroy').remove(); 

} 

});

title 속성을 주면 팝업상단에 titlebar가 생기는데 드래그도 가능합니다.

하지만 기본 titlebar 디자인이 별로라서 일단 제외시켰습니다.


다음은 닫기 기능입니다.

dialog 띄울 때의 id를 파라미터로 줍니다.

$('#'+id).dialog('close');

결과