Jqueryui: come creare un'ombra attorno a una finestra di dialogo?

Question

Sto provando a mettere un'ombra esterna attorno a una finestra di dialogo jqueryui. Qualcosa di simile:

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

e poi facendo:

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

nella sezione javascript. Come posso creare un'ombra attorno alla finestra di dialogo dialog-form?

Answer 1

È possibile ottenere ciò utilizzando CSS3, ma non funzionerà con tutti i browser.

• PRIMO: Nella vostra chiamata finestra di dialogo, impostare il valore di "dialogClass" pari ad un nome di classe della tua scelta:

dialogClass: 'dialogWithDropShadow' 

• SECONDO: Nel foglio di stile, imposta l'ombra esterna sulla classe specificata nel passaggio 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> 

In alternativa, si dovrà utilizzare altre tecniche goccia ombra (div dietro di dialogo, immagini, ecc) che sarà complicato a causa del fatto che non si sta controllando il codice HTML reso da finestra ui jquery .

Buona fortuna!

Answer 2

Mi sono trovato in difficoltà e ho scoperto che la funzione box-shadow CSS3 è probabilmente la soluzione migliore. Anche se non funzionerà con IE8, lo trovo accettabile. Ecco cosa dovete fare:

CSS

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

Codice Dialog

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

Ho cercato di duplicare l'ombra che abbiamo avuto il più vicino ho potuto jQuery UI 1.6.