jQueryUI, dialog

$(document).ready(function(){ ... } 에서 dialog.opton 을 세팅해 두었다고 해도,
.dialog('open') 이전에 option 값을 변경하면 변경된 내용으로 대화상자가 열림.
특히 레이어 팝업의 특성상 화면 중앙에 열려야 한다면, open 이전에 height 와 position center 등을 설정.


하나의 div 를 사용하여 여러가지 팝업을 다루는 경우, 아래와 같이 세팅하고..
.dialog('open') 전에 width, height, title 등등의 옵션값을 수정.
팝업이 열릴때, ajax 로 idPopContent 에 값을 넣는 것도 좋아요.
idPop 는 레이어 팝업 껍데기, idPopContent 는 레이어 팝업 내용물.
.dialog('open') 하기 이전에 idPopContent.html('') 을 먼저 해 주고, idPopContent.html(...) 로 값을 세팅해야..
이전에 띄웠던 레이어 팝업의 내용이 표시되지 않아요.. 아니면, 팝업을 닫을때 해당 내용을 지워주든가..
<div id="idPop">
  <div id="idPopContent"></div>
</div>

idPopContent 에 담기는 내용의 height+50px, width+27px 정도를 idPop 에 적용..? 기본 UI 인 경우.
.css 를 수정한다면 다르겠죠.


CSS 에서 관련 내용을 조정할 수 있어요.
jquery-ui-1.8.10.custom.css 를 예로 든다면..
.ui-widget-header 에서 대화상자 타이틀의 글자 색상과 타이틀 배경 이미지를 교체할 수 있습니다.


option 에 height 를 기술하면 jQueryUI 가 자동으로 위치를 잡아줍니다.
세로로 스크롤 해야 하는 양이라면, dialog 안에서 스크롤 되도록 조정해야 합니다.
dialog 안에서 스크롤 되도록 처리해도, 스크롤 양이 굉장히 많다면..
dialog 가 씌워지는 div 의 height 를 조정해야 합니다. 물론, 최신 웹브라우저에서는 정상 작동하는데..
IE6.x, IE7.x, IE8.x의 호환성보기 모드에서 문제가 생기거든요.


dialog 안에서 화면이 전환되어야 하는데 jQuery.html() 을 사용하면 안 되는 경우도 가끔 생겨요.
이럴때는.. dialog 에 들어가는 내용에 iframe 을 먹입니다. iframe 안에서 계속 돌아가는 구조입니다.