jquery UI 대화 상자가 한 번만 열림

Question

대화 상자를 열 때 버튼이 있습니다. 대화 상자에 숨겨진 div가 표시됩니다.

X 아이콘을 클릭하여 대화 상자를 닫은 후에 대화 상자를 다시 열 수 없습니다.

Answer 1

스콧 곤잘레스는 사람들의 이유를 많이 대해 이야기 최근 블로그 게시물에서 jQuery를 UI로 시작이 문제가 : http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

발췌 :

을

사용자가 종종 대화 상자에서 을 만나는 문제는 사용자가 어떤 동작을 수행 할 때마다 때마다 새 대화 상자를 생성하려고 시도한다는 것입니다. (일반적으로 잉크 또는 버튼). 언뜻보기에 이 요소의 .dialog()를 호출하는 것처럼 보이기 때문에 에 대한 대화 상자가 열리기 때문에이 부분을 이해할 수있는 실수입니다. 실제로 어떤 일이 발생하는지는 이고 새로운 대화 상자 인스턴스는 이고 그 인스턴스는 이 인스턴스 생성 직후에 열립니다. 대화 상자가 열리는 이유는 대화 상자에 autoOpen 옵션이 있기 때문입니다. 기본값은 입니다. 따라서 사용자가 요소에서 .dialog()를 두 번 호출하면 두 번째 호출 은 이 이미 요소에 인스턴스화되어 있기 때문에 무시됩니다.

솔루션 :

이 문제에 대한 간단한 솔루션에 AutoOpen false로 설정 과의 대화를 인스턴스화 한 다음 이벤트 처리기 ('열기') .dialog를 호출하는 입니다. 내가 asp.net의 updatepanel이를 사용할 때주의해야한다는 것을 추가하고 싶은 허용 대답에 추가로

$(document).ready(function() { 
    var $dialog = $('<div></div>') 
     .html('This dialog will show every time!') 
     .dialog({ 
      autoOpen: false, 
      title: 'Basic Dialog' 
     }); 

    $('#opener').click(function() { 
     $dialog.dialog('open'); 
    }); 
}); 

Answer 2

UI 대화 상자를 사용하고 있습니까? 문제의 원인을 파악할 수 있도록 일부 코드를 게시해야합니다. 그러나 여기에서는 추측을합니다 (왜냐하면 내가이 같은 실수를 최근에했기 때문입니다). UI 대화 상자를 사용할 때 대화 상자를 한 번만 초기화해야합니다.

$(document).ready(function() { 
    $('#dialog').dialog({ 
    autoOpen:false, 
    modal:'true', 
    width:450, 
    height:550 
    }); 
$('#MyButton').click(openDialog);  

}); 

이 코드는 대화 상자를 초기화하지만 표시하지 않습니다. openDialog 함수는 MyButton을 클릭하면 대화 상자를 엽니 다. (JQuery와 UI 팀)

var openDialog = function(){ 

     $('#dialog').load('loadurl.php');//load with AJAX 

     //optionally change options each time it is clicked 
     $('#dialog').dialog('option', 'buttons',{ 
      "Cancel":function(){ 
      $('#dialog').dialog('close'); 
      } 
     }); 

    //actually open the dialog 
    $('#dialog').dialog('open'); 

}; 

Answer 3

. 버튼을 클릭하면 다시 게시가 발생하고 팝업이 열리지 만 발생한 다시 게시로 인해 두 번째 열리지 않습니다. 따라서 팝업을 열 때 사용하는 버튼이 다시 게시되지 않도록해야합니다. 예 :.

<asp:LinkButton ID="btn1" runat="server" OnClientClick="return false;">Click me</asp:LinkButton>