jQuery UI Diálogo no se abre por segunda vez

Question

Estoy usando jqueryui para un cuadro de diálogo. Al hacer clic en el enlace 'Hacer clic para un modal' la primera vez funciona. Al presionar la tecla ESC, el cuadro de diálogo desaparece. Pero los clics después de eso no funcionan. Quiero que esos también funcionen. Actualizar la página hace que todo esté bien.

HTML:

<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br /> 

<div class="demo" "> 

<div id="dialog" title="&nbsp;&nbsp;&nbsp;Upload Your Profile Picture" style="border1111:1px solid red; width:640px;"> 

     this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is 


</div><!-- end of id dialog --> 
</div><!-- End demo --> 

jQuery fragmento:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $(".click_me").bind('click', function (e) { 
     e.preventDefault(); 
     $("#dialog").css('border', '5px solid #848484'); 
     $("#dialog").dialog({ 
      width: 460 
     }); 
     //$("#dialog").dialog("option", "height", 180); 
    }); 

    $("body").bind("keyup#dialog", function (event) { 
     // 27 == "esc" 
     if (event.which == 27) { 
      // TODO: close the dialog 
      // unbind the event 
      $("body").unbind("keyup.myDialog"); 
     } 
    }); 

}); 
</script> 

¿Cómo puedo hacer funcionar varios clics?

Answer 1

cuatro cosas.

En primer lugar, si el diálogo debe ser reutilizable, tendrá que crearlo antes la primera posición y ajuste la opción autoOpen a false. Para abrir el cuadro de diálogo, debe usar dialog('open').

Por ejemplo:

$(document).ready(function() { 

    var dialog = $('#dialog'); 

    dialog.dialog({    // <-- create the dialog 
     width: 460, 
     autoOpen: false 
    }); 

    $(".click_me").bind('click', function (e) { 
     e.preventDefault(); 
     dialog.dialog('open'); // <-- open the dialog 
    }); 
}); 

Tenga en cuenta que se crea un var dialog para guardar $('#dialog'). Esto es más eficiente, porque de lo contrario, jQuery debería buscar #dialog varias veces en una pieza de código.

En segundo lugar, usted tiene un error en el código HTML: hay una cita demasiados aquí:

<div class="demo" "> 

Esto podría provocar un comportamiento inesperado en algunos navegadores (pero no todos), lo que hace que sea difícil de depurar. Eliminar la cotización adicional.

En tercer lugar, si recuerdo correctamente, jQuery UI Dialog ya maneja la clave ESC, por lo que no tiene que hacer eso usted mismo. Si desea hacer algo más que cerrar el cuadro de diálogo cuando se presiona exscape, debería usar el evento beforeClose del cuadro de diálogo. Si todo lo que quiere hacer es cerrar el diálogo; estás todo listo. :-)

Y, por último, es una buena práctica no utilizar estilos en línea. Así que en lugar de esto:

<a href="" class="click_me" style="font-size:15px;">Click for a modal</a> 

Crear un archivo CSS con lo siguiente:

.click_me { 
    font-size:15px; 
} 

Usted puede hacer lo mismo para #dialog, incluyendo la frontera ahora se está aplicando con JavaScript:

#dialog { 
    border: 5px solid #848484; 
    width:640px; 
} 

Espero que esto ayude.

---

Aquí es un ejemplo de trabajo que se aplica a los cuatro puntos que he mencionado: http://jsfiddle.net/PPvG/yHTJw/

Tenga en cuenta que los estilos de interfaz de usuario jQuery faltan, por lo que el diálogo es un poco feo.:-)

---

Para garantizar el diálogo funciona como se espera, asegúrese de que está utilizando la última versión de jQuery y jQuery UI y que incluya un tema de jQuery UI.

Aquí se muestra un ejemplo en el que todo se carga a través Google CDN:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" /> 

incluirlos en el <head> de su HTML. El resultado debe verse like this. Si no es así, puede intentar un par de cosas:

• Eche un vistazo a la consola de JavaScript de su navegador (cada navegador moderno tiene una, Google).
• Pruebe con un navegador diferente.
• Pruebe una forma diferente de cargar la página (por ejemplo, a través de file:// versus localhost).
• (Extreme case :) Pruebe una computadora diferente y una conexión a Internet diferente.

Si ninguno de esos funciona, siento decirlo, pero ... "lo estás haciendo mal". :-P

Tenga en cuenta que el fragmento anterior incluirá el tema predeterminado de jQuery UI llamado "base". Si no se ajusta a sus necesidades, puede usar Google CDN para algunos otros temas predeterminados (vea this blog post), o puede crear su propio tema usando ThemeRoller.

---

Editar:

Para asegurarse de que el diálogo conserva la selección (y por lo tanto se cierra cuando el usuario presiona ESC, incluso si el usuario hace clic en otro lugar de la página), intente establecer modal a cierto :

$('#dialog').dialog({ 
    autoOpen: false, 
    modal: true 
}); 

jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/

normal Además, el usuario aún puede interactuar con otros elementos en la página (y, en consecuencia, esos elementos pueden quitar el foco del Diálogo). Cuando la opción modal está configurada en true, el usuario ya no puede interactuar con el resto de la página y el cuadro de diálogo mantendrá el foco sin importar qué.

Espero que esto ayude.

Última pregunta

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Cuestiones relacionadas

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.