Desvanecimiento en superposición en el cuadro de diálogo modal

Question

Tengo un diálogo de interfaz de usuario de JQuery que es modal y tiene un fondo negro con un 50% de opacidad. ¿Es posible hacer que la opacidad de fondo se desvanezca de 0% a 50%? ¿Si es así, cómo? Porque actualmente se siente como recibir un golpe directamente en la cara cuando se muestra un diálogo.

Fwiw, este es el CSS que estoy usando en la actualidad

.ui-widget-overlay { 
    background: black; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 1

Puede utilizar la función de jQuery fadeTo(). Se puede encontrar más información en el siguiente enlace. http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

Answer 2

También podría añadir esto a la fadeIn modal:

$(loginForm).dialog({ 
     resizable: false, 
     open: function(){ 
      $('.ui-widget-overlay').hide().fadeIn(); 
     }, 
     show: "fade", 
     hide: "fade" 
}); 

espero que esto ayude :)

Answer 3

$('.ui-widget-overlay').hide().fadeIn(); 

Este efecto no tiene problema en IE como la opacidad no funcionará después de la decoloración en

Answer 4

Sé que esta es una vieja pregunta, pero me encontré con que acaba de hacer una búsqueda, y siento que podría ayudar a otras personas.

Esto podría mejorarse Estoy seguro, pero esto se desvanecerá dentro y fuera de su superposición al usar un diálogo de interfaz de usuario jQuery.

open: function(){ 
    $('.ui-widget-overlay').hide().fadeIn(); 
}, 
beforeClose: function(){ 
    $('.ui-widget-overlay').remove(); 
    $("<div />", { 
     'class':'ui-widget-overlay' 
    }).css(
     { 
      height: $("body").outerHeight(), 
      width: $("body").outerWidth(), 
      zIndex: 1001 
     } 
    ).appendTo("body").fadeOut(function(){ 
     $(this).remove(); 
    }); 
} 

Answer 5

Una pequeña mejora en la respuesta de Liam Potter. Si desea que la superposición sea a pantalla completa, puede cambiar su código para usar $(document).height() y $(document).width() en lugar del cuerpo, ya que este último se mide más pequeño que el área visible.

open: function(){ 
    $('.ui-widget-overlay').hide().fadeIn(); 
}, 
beforeClose: function(){ 
    $('.ui-widget-overlay').remove(); 
    $("<div />", { 
     'class':'ui-widget-overlay' 
    }).css({ 
     height: $(document).height(), 
     width: $(document).width(), 
     zIndex: 1001 
    }).appendTo("body").fadeOut(function(){ 
     $(this).remove(); 
    }); 
} 

Answer 6

Usted puede crear su propio widget extendiéndose $ .ui.dialog añadir espectáculo de superposición y ocultar animaciones con el uso de la opción de configuración exacta.

Otra funcionalidad que carecen para cerrar el diálogo haciendo clic en la superposición también se añade fácilmente:

en algún archivo, dicen jquery-ui.fsrc.dialog.js:

(function($, undefined) { 

$.widget('fsrc.fsrc_dialog', $.ui.dialog, { 
open: function() { 
    // some helpful vars 
    var self = this, 
     options = self.options; 

    // call parent method - it will create overlay and save it in self.overlay variable 
    var ret = $.ui.dialog.prototype.open.apply(this, arguments); 

    if (options.showOverlay) { 
     // immediately hide and animate overlay 
     // kind a hack, but jquery ui developers left no better way 
     self.overlay.$el.hide().show(options.showOverlay) 
    } 
    if (options.closeOnOverlay) { 
     // close dialog on click on overlay 
     self.overlay.$el.click(function() { 
      self.close(); 
     }) 
    } 
    return ret; 
}, 
close: function(event) { 
    var self = this, 
     options = self.options; 

    if (options.hideOverlay) { 
     // save and unset self.overlay, so it will not be destroyed by parent function during animation 
     var overlay = self.overlay 
     self.overlay = null; 
     overlay.$el.hide(options.hideOverlay, function() { 
      // destroy overlay after animation as parent would do 
      overlay.destroy(); 
     }) 
    } 

    // call parent method 
    var ret = $.ui.dialog.prototype.close.apply(this, arguments); 
    return ret; 
} 
}); 

}(jQuery)); 

En la página:

<script src='/js/jquery-ui.fsrc.dialog.js' type='text/javascript'></script> 
<script type="text/javascript"> 
<!-- 
    jQuery(document).ready(function(){ 
     jQuery('#show').click(function(){ 
      jQuery('#order_form_container').fsrc_dialog({ 
       modal: true, 
       closeOnOverlay: true, 
       show: {effect: "fade", duration: 500}, 
       showOverlay: {effect: "fade", duration: 500}, 
       hide: {effect: "fade", duration: 300}, 
       hideOverlay: {effect: "fade", duration: 300}, 
      }); 
     }) 
    }) 
--> 
</script>` 

He nombrado el espacio de nombre, el widget y las opciones a mi favor.

jquery1.7.2 Probado, jquery-ui1.8.19, IE9, FF11, chrome18.0.1025.168m, opera11.61

Answer 7

Esta es una expansión en la respuesta de Liam Potter. Sus trabajos son geniales para el desvanecimiento, pero no solucionan el desvanecimiento. He encontrado esto de la manera más fácil de hacer que el fondo también se desvanecen de vuelta:

beforeClose: function(){ 
    $('.ui-widget-overlay:first') 
     .clone() 
     .appendTo('body') 
     .show() 
     .fadeOut(400, function(){ 
      $(this).remove(); 
     }) 
    ; 
} 

No se puede hacer esto en el método de "cerrar" porque jQuery ya ha eliminado el contenedor 'en widgets .ui-overlay', sin embargo, al clonarlo para que solo se desvanezca, puede eludir su eliminación y aún así hacer uso de todos los estilos predeterminados.

Answer 8

Tuve que modificar la respuesta de Sam Barnes para que funcione (también lancé la función de clic de diálogo en un $ (documento).función de lista):

<script type='text/javascript'> 
    $(".dialog").click(function(){ 
    $('.ui-widget-overlay').hide().fadeIn();   
    $("div.dialog").dialog({ 
     resizable: false, 
     close: function(){ 
      $('.ui-widget-overlay').hide(); 
     }, 
     show: "fade", 
     hide: "fade" 
    }); 
    $(".ui-dialog").fadeIn(); 
    return false; 
    }); 
    $(".ui-widget-overlay").click(function(){ 
    $(this).hide(); 
    $(".ui-dialog").hide(); 
    }); 
</script> 
<style> 
    .ui-widget-overlay { 
    background: black; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 
</style> 
<div class='ui-widget-overlay'></div> 
<div class='dialog' title='Heading!'>Some Message!</div> 

Puede añadir lo que se esconde en el botón de escape de prensa, añadiendo:

$(document).keyup(function(e) { 

    if (e.keyCode == 27) { 
     $(".ui-dialog").hide(); 
     $('.ui-widget-overlay').hide(); 
    } 
});