2010-05-03 26 views
6

Tengo div (cuadro) en mi página y estoy usando este script para mostrar div como cuadro de diálogo. Dentro de ese div tengo un hiperenlace, al hacer clic en el hipervínculo quiero atenuar el cuadro de diálogo y cerrarlo. El contenido del diálogo se desvanece, pero el borde del cuadro de diálogo permanece igual. Si agrego $ ("# box"). Dialog ('close') a la función click después de fadeto no hay ningún efecto ... simplemente cierra el cuadro de diálogo por completo. ¿Alguna ayuda? usando jquery-ui-1.7.2Cuadro de diálogo de Jquery: no se desvanece antes de cerrar

<script type="text/javascript"> 
      $(document).ready(function(){ 
       $("a#later").click(function() { 

       $("#box").fadeTo('slow', 0); 
       }) 
      }); 
      $(function() { 
       $("#box").dialog({ 
        autoOpen: true, 
        width: 500, 
        modal: true, 

       }); 
      }); 
</script> 

Respuesta

16

¿Qué hay de

$("#box").fadeTo('slow', 0, function() { 
    $("#box").dialog('close'); 
}); 

¿Desea que ocurra lo próximo después de que finalice el fundido, correcto?

+0

¡Eso es lo que yo llamo Awesome! –

+0

Esta pequeña canción es justo lo que necesitaba, y funciona bien en Chrome y FF. Todavía no he hecho ninguna prueba de IE. –

+2

en realidad, '$ (" # box "). Dialog (" widget "). FadeTo (...)' es mejor porque la animación de fundido se aplica a toda la caja, no solo al interior. – Sebas

3

probar esto, podría funcionar:

$("a#later").click(function() { 
    $("#box").fadeTo('slow', function() { 
     $("#box").dialog("close") 
    }); 
}); 
+0

No .. simplemente se cierra, sin efecto de fundido. –

+0

edité mi respuesta. – GerManson

+0

usted está muy cerca .. Consulte la respuesta a continuación ... el FadTo también necesita un segundo parámetro para la velocidad. –

1

Prueba esto:

  $(function() { 
       $("#box").dialog({ 
        autoOpen: true, 
        width: 500, 
        modal: true, 
        show: 'blind', 
        hide: 'fade' 
       }); 
      }); 

Salida el ejemplo aquí: Animated Dialog

+0

Aw Man ... Ni siquiera carga el diálogo ahora, se oculta de manera predeterminada :) –

+0

He actualizado mi respuesta. – Giorgi

+0

Ahora se carga con un desvanecimiento en efecto ... ni siquiera cerrará el diálogo –

2

Probé el código de algunos Richard a continuación y funciona. Puede proporcionar el nombre del efecto como una cadena:

$("#dialog").dialog({ 
    hide: "fadeOut" 
}); 

o puede proporcionar un hash si tiene opciones adicionales, tales como:

$("#dialog").dialog({ 
    hide: {effect: "fadeOut", duration: 5000} 
}); 
1

este es mi código:

$(function() { 
$("a#link-id").click(function(){$(".ui-dialog").fadeOut(2000)})}); 

esto está funcionando script :). No necesita hacer clic en el botón 'cerrar'.

+0

¡Pero si hay otro cuadro de diálogo abierto, se desvanecerá a ambos! –

Cuestiones relacionadas