jQuery Dialog 팝업창 사용

가끔은 삭제할 때 팝업창으로 값을 넘기고 싶을 때가 있는데...ㅋㅋ
이것을 쓰면 좋겠다 싶구만...

우선 아래처럼 레이어 팝업창을 하나 만들고...

 

 

   

      선택하신 관리자를 삭제하시겠습니까?

      삭제하려면 비밀번호 입력후 삭제하기를 클릭하십시오.

      당신의 비밀번호 입력 : 

   


   
   
   

jQuery 소스 부분을 아래와 같이 ㅋㅋ 하면 팝업창이 쨘~~!!

참고로 jQuery UI 소스가 Include 되어야함을 명심..^^

 

   // 삭제 Dialog 처리....
   var delDialog = $("#deleteItem");

   delDialog.dialog({
      autoOpen: false,
      width: 460,
      buttons: [
         {
            text: "취소하기",
            click: function() {
               $( this ).dialog( "close" );
            }
         },
         {
            text: "삭제하기",
            click: function() {
               var chkPass = $('#chkdelpwd');
               if(chkPass.val()){
                  $('#delpwd').val(chkPass.val());
                  $("#deleteForm").submit();

               }else{
                  alert('비밀번호를 입력하세요!');
                  chkPass.focus();
               }

            }
         }
      ]
   });

   var btnDeletePrc = $('#btnDelete');
   btnDeletePrc.click(function(event){
      delDialog.dialog( "open" );
      event.preventDefault();       // click 이벤트 이후에 다른 행동을 하지 말라는 뜻의 설정....return false 대용....
   });