Jquery dialog button focus.

구글에 jquery dialog button focus 이렇게 검색 하였더니.
아래와 같은 결과가..

 Why is the dialog Close icon focused when opening the dialog?
I would like to have it not focused when the dialog opens.
Is there a way to make that happen?
Thanks,

 이렇게 질문한 사람이 있었다.
이것에 대한 답변으로

In rc5 and previous releases the logic was:
find the first tabbable element in the dialog and give it focus on
open.

In current SVN the logic is:
find the first tabbable element in the following order:
- content area
- button pane
- title bar
and give it focus on open.

This is done for accessibility to ensure that the dialog has focus
when opened.  We may change the logic after doing some testing to
focus the actual dialog div if the close button is what would receive
focus.

뭐 맨 윗줄 보면 처음 탭 이동이 가능한 엘리먼트를 다이얼 로그를 열때
포커스를 얻는다고 되어 있다.

이를 해결하기 위해 다이얼로그를 열때 포커스를 직접 지정해 주어야 한다.

You can try this:
$("#dialog").dialog({
    open: function() {
        $(this).parents('.ui-dialog').attr('tabindex', -1)[0].focus();
    }
});

이렇게.

위의 방식대로 하게 되면 버튼 자체에 포커스가 사라져 버린다.
ui.dialog.css 파일을 보면 text-align: 이 left로 되어있다. 이걸 center로 변경 하고
.ui-dialog .ui-dialog-buttonpane { text-align: center; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
그 밑에 라인을 보면 float: right로 되어있다. 이게 버튼 창을 오른쪽으로 밀게 되어있다.
.ui-dialog .ui-dialog-buttonpane button { float: none; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }

이렇게 하면 가운데 정렬에 (확인), (취소) 버튼 순서대로 나오고 (확인) 버튼에 포커스가 있는것을 확인 할 수 있다.