jQueryUI Dialog height 값 auto 설정시, IE 6/7/8 과 IE 9/10 의 호환성 보기에서 애매..

jQueryUI Dialog 로 레이어 팝업을 구현합니다.

Ajax 로 가져온 DOM 을 Dialog 에 담으려다 보니 width 값은 일정한데, height 값은 가변적이라 height:auto 를 사용합니다.

Ajax 는 callback 함수를 호출할 수 있는 사용자 정의 함수(openSimpleUri)를 활용합니다.

크롬에선 정상적으로 작동하는데, IE 8 에서 팝업 창이 열리다 만 상태로 표시. 아무래도 height 값을 제대로 계산하지 못한 모냥.

크롬에선 Ajax 로 DOM 을 채우고 dialog('open') 하면 채워진 DOM 을 기준으로 height 를 자동계산하는데,

IE 8 에선 Ajax 가 DOM 을 가져오기 전에 dialog('open') 하니까 height 값을 계산하지 못하는 것이더군요. 이건 callback 함수로 해결.

$.browser.msie (jQuery 1.5 에선 아직 사용가능) 로 IE 인 경우에 height 값을 20 픽셀 정도 늘여 주었더니,

IE 10 에서 호환성 보기를 껐을때 문제가 생기네요. 체크해 보니, height 값이 소수점을 찍고 몇자리 까지 표시되는거에요.

Adaptive Web 또는 Responsive Web 을 구현한답시고 이런 모양이에요.

체크해 보니, IE 10 에선 크롬과 같이 height 를 자동계산 할 수 있어서,

IE 9 버전 미만에서만 height 값에 20 픽셀을 넣으라고 open() 함수를 override 하는 것으로 일단락.

코드는 아래와 같습니다.

아래 코드에서 위젯 배경색을 보정하는 것은, 위젯 사용시 회색(#DADADA)으로 세팅한 화면들과의 호환을 위해 필요했던 사항으로..

필요없으면 세팅하지 않아도 됩니다.

<div id="myPopup"></div><!-- jQueryUI 를 이용한 레이어 팝업, .css 에서 display:none 으로 세팅 -->

<script>

var $myPopup, myPopupOption; // 전역변수, 팝업은 하나만 사용하면 되고, 옵션도 전역으로..

$(document).ready(function(){

  $myPopup = $('#myPopup');

  myPopupOption = {

    autoOpen:false, modal:true,

    show:'slide', hide:'slide',

    draggable:true, resizable:false,

    maxHeight:800, // 너무 길어지면 스크롤 하라 하는 건데, 입맛에 맞지 않으면 해당 화면에서 옵션을 조정하여 해결

    close:function(){ $('.ui-widget-content').css('background','#DADADA'); }, // 위젯 배경색 보정, jquery-ui-1.8.10.custom.css 참조

    open:function(){

      if($.browser.msie && Number($.browser.version)<9)

       $(this).dialog('option','height',$(this).dialog('option','height')+20); // IE6,7,8 보정

      $('.ui-widget-content').css('background','white'); // 위젯 배경색 보정

    }

  };

  $myPopup.dialog(myPopupOption); // 옵션 초기화

});

var closeMyPopup = function(){ $myPopup.dialog('close'); } // 팝업을 화면에서 숨김(닫기)

var OpenMyPopup2 = function(){ $myPopup.dialog('open'); } // 팝업을 화면에서 오픈

var openMyPopup = function(){ // args[0] DOM 또는 uri, args[1] Y/N option 여부, args[2] uri 파라미터

  var args = openMyPopup.arguments;

  if(args[2]){

    if(args[1] && args[1]=='Y') $myPopup.dialog('option', myPopupOption); // #1/2. 옵션 설정(옵션은 미리 세팅 요망)

    openSimpleUri('myPopup',args[0],args[2],'OpenMyPopup2'); // #2/2. callback. IE 에서 jQueryUI 보다 ajax 가 늦게 돌아서 height 값을 계산 못함

  }else{

    if(args[1] && args[1]=='Y') $myPopup.dialog('option', myPopupOption); // #1/3. 옵션 설정(옵션은 미리 세팅 요망)

    $myPopup.html(content); // #2/3. HTML 채우고

    $myPopup.dialog('open'); // #3/3. 팝업 오픈

  }

}

function openSimpleUri(id,uri){ // id 에 uri 에서 뽑아온 내용을 담는다

  var args = openSimpleUri.arguments; // args[0] id, args[1] uri, args[2] parameter, args[3] callback

  var param = '';

  if(args[2]) param = args[2]

  $.ajax({

    type: 'POST',

    url: uri,

    data: param,

    dataType : 'text',

    cache:false,

    success:function(resultText){

      $('#'+id).html('').html(resultText); // 제휴사 탭메뉴 내부에 있는 4가지 탭 중 하나 호출

      if(args[3]){ try{ eval(args[3]+ '()'); }catch(e){} } // Callback 함수 호출

    },

    error:function(){

    }

  });

}

function openThis(param){

  var f = document.form1;

  f.param.value = param;

  myPopupOption = {

    title:'...',

    width:528

  };

  openMyPopup('...jsp','Y','mode=' +f.mode.value+ '&year=' +f.year.value+ '&isrtId=' +param);

}

</script>