el diálogo de jquery ui se abre solo una vez

Question

Tengo un botón que abre un cuadro de diálogo cuando se hace clic. El cuadro de diálogo muestra un div que estaba oculto

Después de cerrar el cuadro de diálogo haciendo clic en el icono X, el cuadro de diálogo no se puede volver a abrir.

Answer 1

de Scott González (de la interfaz de usuario del equipo jQuery) habla sobre la razón por la que mucha gente tiene este problema al empezar con jQuery UI en un reciente post: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

un extracto:

El problema con el que los usuarios suelen encontrar con diálogos es que intentan crear un nuevo cuadro de diálogo cada vez que el usuario realiza alguna acción (generalmente haciendo clic en al tinta o un botón ). Esto es un error comprensible porque a primera vista parece llamar .dialog() en un elemento es lo que hace que el cuadro de diálogo se abra. En realidad, lo que está sucediendo es que se está creando una nueva instancia de diálogo y luego esa instancia es que se abre inmediatamente después de la instanciación . La razón por la que se abre el cuadro de diálogo es porque los cuadros de diálogo tienen una opción de apertura automática, que por defecto es verdadero. Por lo tanto, cuando un usuario llama a .dialog() en un elemento dos veces, la segunda llamada se ignora porque el cuadro de diálogo tiene ya instanciado en ese elemento .

Solución:

La solución simple a este problema es para crear una instancia de diálogo con el Autoopen establece en false y luego llamar .dialog ('abierto') en el controlador de eventos.

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

¿Está utilizando el cuadro de diálogo ui? Debería publicar un código para que podamos ver qué está causando su problema. Pero aquí hay una conjetura (porque cometí este mismo error recientemente). Al usar el diálogo ui, debe inicializar el diálogo solo una vez.

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

}); 

Este código inicializa el diálogo pero no lo muestra. La función openDialog abrirá el cuadro de diálogo cuando se haga clic en MyButton.

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

Como complemento a la respuesta aceptada me gustaría añadir que es necesario prestar atención al utilizar esto en un UpdatePanel asp.net. Si hace clic en el botón, se realizará una devolución de datos, la ventana emergente se abrirá pero no se abrirá una segunda vez debido a la devolución de datos que sucedió. Por lo tanto, debe asegurarse de que el botón que utiliza para abrir la ventana emergente no se devuelva. es decir:?. Código

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