_focusTabbable 에러

unable to get property'_focusTabbable'of undefined or null reference

dialog popup을 이용할 때 나는 에러

 

1.

$(this).dialog("close");로 닫을 때

알람창이나 다른 팝업이 떠있으면 this가 달라지기 때문에 직접 dialog창의 ID를 넣어줌

$("dialog").dialog("close")

2. 

close로 닫았을 때 에러가 나면

$("dialog").dialog("destroy")로 팝업자체를 삭제

이건 html에서 요소 자체를 지워주기 때문에 dialog를 오픈할 때 html에 자리만 만들어두고 append해줘야함

3.

일반적으로 팝업창의 버튼(Ok, Cancel)을 눌러 close할 때는 버튼 click 함수안서 destroy시키는데

팝업 우측의 x버튼, ESC키를 눌러서 닫을 땐 그럴 수 없다.

3-1.

dialogClass: "no-close" 옵션으로 x키를 지우거나

beforeClose 함수를 추가하여 x키 눌렀을 때도 destroy 되도록 한다.

이때 버튼의 click함수에서도 destroy하면 destroy할 요소가 없다고 뜨기 때문에 함수안에선 close시켜줘서 beforeClose함수를 타도록 함.

3-2. 

ESC로 닫을땐 beforeClose 함수도 안타기 때문에 esc로 끄는걸 막기위해

closeOnEscape: false로 막음

 

<div id="dialogDiv"></div>

$("dialogDiv").append("<div id="dialog"></div>");
var dial = $("#dialog");
      
  dial.dialog({
    title: title,
    //dialogClass: "no-close",
    //closeOnEscape: false,
    autoOpen: false,
    resizable: false,
    height: iHeight,
    width: iWidth,
    modal: true,
    beforeClose: function (event, ui) {
      dial.dialog("destroy");//.remove();
    },
    button: [
      {
        text: "OK",
        class: "pr_btn_01",
        click: function () {
          //code...
          dial.dialog("close");
        },
      },
      {
        text: "CANCEL",
        class: "pr_btn_02",
        click: function () {
          dial.dialog("close");
        },
      },

    ],
  });