0

## JqueryDialog 기본

참고: http://jqueryui.com/dialog/

1. dialog 선언

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

$(function() {
    $( "#dialog" ).dialog();
});

<div id="dialog" title="Basic dialog"><p>content</p></div>


2. 기본 옵션

$(function() {
    $( "#dialog" ).dialog({
          autoOpen : false     // dialog가 선언후 자동열림 여부
        , width : "500px"       // dialog 너비 지정
        , height : "500px"     // dialog 높이 지정
        , modal : true           // dialog를 modal 창 열림 여부
        , resizeable : false   // 사이즈 조절가능 여부
        , buttons : {             // dialog 하단 버튼들
        "닫기" : 함수명,  // dialog 하단 버튼 클릭시 실행할 함수. (함수는 $.ready안에 선언되어있어야 함.)
            Cancel : function() {
                $(this).dialog("close"); // button 실행을 직접 선언하려면 function안에 기능을 써준다.
            }
        }
        , show: {               // 애니메이션 효과 - 보여줄때
            effect: "blind",   // 효과
            duration: 1000 // 지속시간 
        }
        , hide: {                // 애니메이션 효과 - 숨길때
            effect: "explode",
            duration: 1000
        }
    });
});