놀고 먹고픈 개발자

원하는 결과 창

1번 전체 모달창

2번 하단 버튼 영역

3번 내가 추가하고 싶은 html

-> dialog option  항목 중 open 을 사용!  

  open:function () {
        var html2 = "<div class=\"button_info\">보안메일로 발송하겠습니까?</div>";
       $(".ui-dialog .ui-dialog-buttonpane").prepend(html2);
    }

 $("#alertWindow").dialog({
        resizable: false, // 사이즈 조절 가능 여부
        modal: true, // 배경색 어둡게:true, 밝게:false
        autoOpen:false, 
        minWidth:400, 
        height:"auto",
        zIndex:9000, 
        title : title, // 다이얼로그 제목
        buttons: [
            {
                text : message_common.CM0015,
                click:function(){
                    $( this ).dialog( "destroy" );
                    if( callback ){
                        // 확인 눌렀을 때 실행할 콜백 함수
                        callback();
                    }
                }
            },
            {
                text : message_common.CM0028,
                click:function(){
                    $( this ).dialog( "destroy" );
                   if( callback ){
                        // 취소 눌렀을 때 실행할 콜백 함수
                        callback();
                    }
                }
            }
        ],
      open:function () {
       	var html2 = "<div class=\"button_info\">보안메일로 발송하겠습니까?</div>";
      	$(".ui-dialog .ui-dialog-buttonpane").prepend(html2);
  	 }
 });

여기서 append 대신 prepend 를 사용한 이유는 확인/취소 버튼 앞에 메시지를 놓고 싶었기 때문이다.

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <!-- ui-dialog-buttonpane 의 첫번째 자식 -->
     <div class="button_info">보안메일로 발송하겠습니까?</div>
     <!-- ui-dialog-buttonpane 의 두번째 자식 -->
     <div class="ui-dialog-buttonset">
		<button type="button" class="ui-button ui-corner-all ui-widget">확인</button>
		<button type="button" class="ui-button ui-corner-all ui-widget">취소</button>
	</div>
</div>

+) .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.

    .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.

    .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다.

   . prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다.