jQuery UI 팝업창 위치 정중앙으로

jQuery UI 팝업창이 최상단 정중앙에 오지 않고 이상하게 보이는 증상 때문에 삽질을 엄청했다.

https://jqueryui.com/download/all/ 에서 가장 최신버전을 받아서 홈페이지에 필요한 파일을 옮긴다.

가장 최신버전이 2016.9월에 올라온 버전이다.

<div id="dialog" title="회원 현황"></div>

HTML 파일 하단에 팝업창을 띄울 dialog DIV를 적어준다.

헤더에 다음과 같이 경로에 맞게 두줄을 추가한다.

<link href="css/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-ui.js"></script>

테이블에 id를 추가하고 tr 에 uid 값이 기록되도록 코드에 추가한다.

<table id="BBSListTable" class="table table-striped table-bordered table-hover">
<tbody>
<tr id="<?php echo $R['uid']; ?>">

제어를 위한 jQuery 코드를 아래와 같이 작성한다.

$('#BBSListTable tbody tr').click(function() {     var idx = $(this).attr('id');     BBSView(idx); }).mouseover(function() {     $(this).children().css({         'backgroundColor' : '#DCDCDC',         'cursor' : 'pointer'     }); }).mouseout(function() {     $(this).children().css({         'backgroundColor' : '#FFFFFF',         'cursor' : 'default'     }); }); function BBSView(idx){     $('#dialog').load('BBSView.php?idx=' + idx, function() {         $(this).dialog({             autoOpen : true,             title : '회원정보',             width: 450,             height: 300,             draggable: true,             position: { my: "center", at: "center", of: window },             buttons : {                 "수정" : function() {                     gocStaffModifyView(idx);                 },                 "삭제" : function() {                     gocStaffDelete(idx);                 },                 "닫기" : function() {                     $(this).dialog("close");                 }             }         });     }); }

position: { my: "center", at: "center", of: window } 이 한줄의 옵션을 몰라서 엄청 해멨다.

이 한줄로 고민은 싹 해결되었다.