jQuery 모달(dialog) 코드 이해하기

jQuery dialog (jQuery 팝업)창을 띄우는 코드를 사용하려면 https://jqueryui.com/dialog/ 사이트를 참조하면 된다.

$("#id").dialog() - 해당 id로 지정된 영역의 내용을 다이얼로그로 생성
$("#id").dialog("open")  - 다이얼로그 오픈
$("#id").dialog("close") - 다이얼로그를 화면상에서 보이지 않게함
$("#id").dialog("isOpen") - 해당 id를 가진 다이얼로그가 열려진 상태인 경우 true값
$("#id").dialog("moveToTop") - 다이얼로그를 최상위로 배치

- autoOpen : 페이지 로드시 자동으로 다이얼로그 열리는 것을 막고자 할 때 사용 ex) autoOpen:false

- modal : 페이지의 다른 내용위에 최상위로 표시되면서 다른 영역은 선택할수 없도록 할 때 사용 ex) modal:true

- width, height : 다이얼로그 창의 너비, 높이를 설정

아래 파일 구조는 http://link2me.tistory.com/1098 게시글과 같이 보면 이해가 될 것이다.

기본적인 Layout 에서 팝업창으로 새 그룹을 생성하고 바로 화면을 갱신처리하는 일련의 코드이다.

    <div data-role="footer" data-position="fixed" data-theme="d">
        <table>
        <tr>
        <td width="15%"></td>
        <td width="70%" align=center>그룹 추가</td>
        <td width="15%" align=right><a href="#" data-role="button" data-icon="plus" data-iconpos="left" id="groupadd">추가</a></td>
        </tr>
        </table>       
    </div>
</div>
<div id="dialog-add" title="그룹 추가">
    <form>
        <p>새 그룹명</p>
        <input type="text" name="group" />
        <input type="hidden" name="uid" value='<?php echo $uid?>' />
        <input type="hidden" name="status" value='n' />
    </form>
</div>

추가 버튼(id="groupadd")을 누르면 dialog 창이 떠서 새 그룹명을 입력 받고 처리하도록 하고 싶다면??

먼저 jQuery 를 추가해야 한다.

https://jqueryui.com/dialog/ 사이트를 참조해서 아래 색깔로 표시된 것을 복사하여 붙여넣기 한다.

<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/group_dialog.js"></script> <!-- 작성할 jQuery 스크립트 -->

===== group_dialog.js ======

$(function(){
    $("#dialog-add").dialog({
        autoOpen: false,
        buttons:[
            {
                text: "추가",
                click: function(){
                    var uid = $("input[name='uid']").val();
                    var group = $("input[name='group']").val();                   
                    if(!group) { // 입력 여부 검사
                        alert("그룹명을 입력하세요");
                        $("input[name='group']").focus();
                        return false;
                    }
                    var status = $("input[name='status']").val();
                    GroupAdd(uid,group,status);
                }
            },
            {
                text: "취소",
                click: function(){
                    $(this).dialog("close");
                }
            }
        ]
    });

    $("#groupadd").click(function(){       
        $("#dialog-add").dialog("open");
    });

});

function GroupAdd(uid,group,status){
    $.post("GroupMake.php", {uid:uid, group:group,status:status}, function(msg){
        if(msg==1){
            location.reload(); // 화면 갱신처리 (같은 화면을 갱신처리하는 것임)          
        } else if(msg==0){
            alert('그룹 추가에 실패했습니다');
        } else if(msg=='-1'){
            alert('그룹이 이미 존재합니다');
        } else if(msg=='-2'){
            alert('DB 에러가 발생했습니다');
        }
        $("#dialog-add").dialog("close");
    });
}

======= GroupMake.php =====

바로 접속하는 걸 방지하는 코드는 생략했다. 간편하게 내용 중심으로 작성해두기 위해서....

<?php
include ('dbconnect.php');
require_once "class/GroupClass.php";
$c=new GroupClass;

if(strcmp($_REQUEST['status'],'n')==0){//추가   
    $rs=$c->NewGroup($_REQUEST['uid'],$group); // 즐겨찾기 그룹명 추가
    // rs : 1(성공), 0(실패), -1(중복), -2(DB error)
} else if (strcmp($_REQUEST['status'],'d')==0){//삭제
    $rs=$c->DelGroup($_REQUEST['uid'],$group);
    // rs : 1(성공), 0(실패)
}
echo $rs;  // jQuery 의 function(msg) 로 던져지는 결과값
?>

개념을 설명하는 자료이므로 class/GroupClass.php 파일 내용은 적지 않는다.

이 정도면 봐도 충분히 응용이 가능하다고 본다.

참고하면 도움되는 게시글 링크

https://www.oreilly.com/library/view/jquery-ui/9781449325176/ch04s05.html