'2019/01/21'에 해당되는 글 1건

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

Web 프로그램/js, jQuery 2019. 1. 21. 21:42
728x90

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 } 이 한줄의 옵션을 몰라서 엄청 해멨다.

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







저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

검색어 입력후 엔터키 누르면 실행되는 코드  (0) 2019.01.29
jQuery 입력값 체크 함수 만들어 사용하기  (0) 2019.01.26
jQuery Paging 처리 (진행중....)  (0) 2019.01.20
JSON.parse(), JSON.stringify()  (0) 2019.01.13
JSON 데이터 읽어서 그래프 그리기  (0) 2018.12.18
블로그 이미지

Link2Me

,

카테고리

글 보관함

달력

«   2019/01   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

공지사항

티스토리툴바