Jqueryui: Wie man einen Schatten um ein Dialogfeld macht?

Ich versuche, einen Schlagschatten um eine jqueryui-Dialogbox zu legen. Etwas wie:Jqueryui: Wie man einen Schatten um ein Dialogfeld macht?

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

und dann tun:

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

im JavaScript-Bereich. Wie kann ich einen Schatten um den dialog-form Dialog erstellen?

Quelle

2010-08-10 James

Sie meinen, Sie wollen die modale Überlagerung sowie den Schlagschatten? – Stephen

Von dem, was ich sagen kann, betrügt die jQuery UI themoller mit einigen absolut positionierten Elementen. Nicht sicher, ob es in einem Dialog funktioniert. – Stephen

Was passiert, wenn es mir egal ist, dass es ziehbar ist? – James

Sie können dies mit CSS3 erreichen, aber es wird nicht in allen Browsern funktionieren.

FIRST: In Ihrem Dialogaufruf, den Wert von "dialogClass" gleich einen Klassennamen Ihrer Wahl:

dialogClass: 'dialogWithDropShadow'

ZWEITE: In Ihrem Stylesheet, Setzen Sie den Schlagschatten auf die in Schritt 1 angegebene Klasse.

<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>

Alternativ werden Sie andere Schlagschatten Techniken (div hinter Dialog, Bilder, etc.) verwenden müssen, die aufgrund der Tatsache kompliziert sein wird, dass Sie die HTML von jQuery UI-Dialog gemacht steuern .

Viel Glück!

Quelle

2010-12-30 21:46:13 ctorx

dialogClass: 'dialogWithDropShadow' // mit Anführungszeichen –

Danke, korrigiert. – ctorx

Nur "Box-Shadow" wird heute tun für: IE9 +, Firefox, Chrome, Opera und Safari 5.1.1. – maets

Ich habe damit zu kämpfen und festgestellt, dass die CSS3 Box-Shadow-Funktion wahrscheinlich die beste Lösung ist. Während es mit IE8 nicht funktioniert, finde ich das akzeptabel. Hier ist was Sie tun:

CSS

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

Dialog-Code

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

Ich versuchte, den Schatten zu kopieren, die wir jQuery UI hatte 1.6 so genau, wie ich konnte.

Quelle

2012-03-20 18:26:38 Hawkee

Jqueryui: Wie man einen Schatten um ein Dialogfeld macht?

Antwort

Verwandte Themen