2010-08-10 54 views
12

Estoy tratando de poner una sombra paralela alrededor de un cuadro de diálogo jqueryui. Algo así como:Jqueryui: ¿cómo hacer una sombra alrededor de un cuadro de diálogo?

<div id="dialog-form" class="ui-widget-shadow ui-corner-all"> 
    Some stuff in the box with a shadow around it 
</div> 

y luego hacer:

$(function() { 
    $("#dialog-form").dialog({ 
    resizable: false, 
    height: 300, 
    width: 350, 
    modal: true 
    }); 
}); 

en la sección javascript. ¿Cómo puedo hacer una sombra alrededor del cuadro de diálogo dialog-form?

+0

¿Quiere decir que quiere la superposición modal así como la sombra paralela? – Stephen

+0

Por lo que puedo decir, el jQuery UI themeroller hace trampa con algunos elementos absolutamente posicionados. No estoy seguro de si funcionará en un diálogo. – Stephen

+0

¿Qué pasa si no me importa que sea arrastrable? – James

Respuesta

31

Puede lograr esto usando CSS3, pero no funcionará en todos los navegadores.

  • PRIMERO: En su llamada de diálogo, establezca el valor de "dialogClass" igual a un nombre de clase de su elección:
dialogClass: 'dialogWithDropShadow' 
  • SEGUNDO: En la hoja de estilos, establecer la sombra paralela en la clase especificada en el paso 1.
<style type="text/css"> 
    .dialogWithDropShadow 
    { 
     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
    } 
</style> 

Alternativamente, usted tiene que utilizar otras técnicas de la sombra del descenso (div detrás de diálogo, imágenes, etc.) que va a ser complicado debido al hecho de que no se está controlando el HTML representado por el diálogo de interfaz de usuario jQuery .

¡Buena suerte!

+0

dialogClass: 'dialogWithDropShadow' // con comillas –

+0

Gracias, corregido. – ctorx

+2

Solo "box-shadow" funcionará hoy en día para: IE9 +, Firefox, Chrome, Opera y Safari 5.1.1. – maets

5

Estaba luchando con esto y descubrí que la característica de sombreado de caja de CSS3 es probablemente la mejor solución. Si bien no funcionará con IE8, me parece aceptable. Esto es lo que hace:

CSS

.ui-dialog-shadow { box-shadow: 0 0 0 7px rgba(0,0,0,0.1); } 

el código de diálogo

open: function() { $(".ui-dialog").addClass("ui-dialog-shadow"); }, 

Traté de duplicar la sombra que tuvimos tan cerca como pude jQuery UI 1.6.

Cuestiones relacionadas