Ajax 모달 윈도우 용 jQuery UI 대화 상자

Question

jQuery UI 대화 상자 위젯과 함께 AJAX를 사용하여 동적으로 내용을로드하는 모달 윈도우를 만들려고합니다. 사용자가 무언가를 요청한 다음 대화 상자가 페이지에 존재하고 사용자가 닫기 버튼을 클릭 할 때 다시 제거된다는 아이디어가 있습니다. 그러나 현재 코드에는 두 가지 문제점이 있습니다. 1. 대화 상자가 페이지에 존재하기 때문에 요청할 수 있습니다. 2. 사용자가 모달을 닫으면 페이지를 새로 고치지 않으면 다시 열 수 없습니다. .

나는 내 응용 프로그램에 다음 코드가 : 어떤 도움이 많이 주시면 감사하겠습니다

$('.ajax').live('click', function() 
     { 
      var url = this.href; 
      var dialog = $("#dialog"); 
      if ($("#dialog").length == 0) 
      { 
       dialog = $('<div id="dialog"></div>').appendTo('body'); 
      } 
      dialog.load(
        url, 
        {}, 
        function(responseText, textStatus, XMLHttpRequest) 
        { 
         dialog.dialog(); 
        } 
       ); 
      return false; 
     }); 

합니다. demo

$('.ajax').live('click', function() 
{ 
    var url = "/home/test"; 
    var dialog = $("#dialog"); 
    if ($("#dialog").length == 0) 
    { 
     dialog = $('<div id="dialog"></div>').appendTo('body'); 
    } 
    $.ajax(
     { 
      url: url, 
      beforeSend: function (jqXHR, settings) 
      { 
       //show an animated gif 
      }, 
      complete: function (jqXHR, textStatus) 
      { 
       //hide the animated gif 
      }, 
      success: function (data, textStatus, jqXHR) 
      { 
       dialog.dialog().html(data); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) 
      { 
       dialog.dialog().html("An error occured..."); 
      } 
     }); 

    return false; 
}); 

Answer 1

감사

당신이 필요하거나이 테스트 코드는? 왜냐하면 당신이 제공 한 코드로 모든 것이 정상적으로 닫히고 나서 대화 상자는 여전히 존재합니다.