jquery ui Dialog öffnet sich nur einmal

Question

Ich habe eine Schaltfläche, die ein Dialogfeld öffnet, wenn Sie darauf klicken. Der Dialog zeigt einen versteckten Div an

Nachdem ich den Dialog durch Klicken auf das X-Symbol geschlossen habe, kann der Dialog nicht mehr geöffnet werden.

Answer 1

Scott Gonzalez (der jQuery UI-Team) spricht über den Grund eine Menge Leute haben dieses Problem, wenn es mit jQuery UI kürzlich in einem Blog-Post Sie beginnen: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

Ein Auszug:

Das Problem, dass Benutzer oft mit Dialogen begegnen, ist, dass sie versuchen, ein neues Dialogfeld instanziieren jedes Mal der Benutzer führt einige Aktion (in der Regel klicken al Tinte oder eine Taste). Dies ist ein verständlicher Fehler, weil es auf den ersten Blick scheint Aufruf von .dialog() auf einem Element ist, was bewirkt, dass der Dialog öffnen. In Wirklichkeit ist der Fall, dass eine neue Dialoginstanz erstellt wird und dann diese Instanz sofort nach Instanziierung geöffnet wird. Der Grund dafür, dass der Dialog geöffnet wird, liegt darin, dass die Dialoge eine autoOpen-Option haben, die standardmäßig auf true festgelegt ist. Wenn ein Benutzer also .dialog() für ein Element zweimal aufruft, wird der zweite Aufruf ignoriert, da der Dialog bereits in das Element instanziiert wurde.

Lösung:

Die einfache Lösung für dieses Problem ist den Dialog mit AutoOpen- auf false gesetzt zu instanziiert und rufe dann .dialog ('open') in den Event-Handler.

$(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

Verwenden Sie den Dialog ui? Sie sollten etwas Code posten, damit wir sehen können, was Ihr Problem verursacht. Aber hier ist eine Vermutung (weil ich diesen Fehler kürzlich gemacht habe). Wenn Sie den Dialog verwenden, müssen Sie den Dialog nur einmal initialisieren.

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

}); 

Dieser Code initialisiert den Dialog, zeigt ihn aber nicht an. Die OpenDialog-Funktion wird dann das Dialogfeld öffnen, wenn auf MyButton geklickt wird.

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

Als Ergänzung zu der Antwort akzeptiert Ich möchte hinzufügen, dass Sie brauchen Aufmerksamkeit zu zahlen, wenn diese Update in einer asp.net verwenden. Wenn Sie auf die Schaltfläche klicken, wird ein Postback ausgelöst, das Popup öffnet sich, wird aber aufgrund des Postbacks nicht ein zweites Mal geöffnet. Sie sollten also sicherstellen, dass die Schaltfläche, die Sie zum Öffnen des Popups verwenden, kein Postback durchführt. dh:.

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