make layer opaque on click

build/css/ox.ui.classic.css

@@ -34,8 +34,8 @@ Dialog
 */
 
 .OxThemeClassic .OxDialog {
-    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
-    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 }
 
 .OxThemeClassic .OxDialog .OxBar {

build/css/ox.ui.css

@@ -66,6 +66,7 @@ Dialog
     //right: 0;
     //bottom: 0;
     //margin: auto;
+    z-index: 11;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
@@ -396,6 +397,8 @@ Layers
     position: absolute;
     width: 100%;
     height: 100%;
+    background: rgb(0, 0, 0);
+    opacity: 0;
     overflow: hidden;
     z-index: 10;
 }

build/js/ox.ui.js

@@ -1299,8 +1299,10 @@ requires
                 .appendTo(that.$buttonsbar);
         });
         that.$buttons[0].focus();
-        that.$layer = new Ox.Element()
+        that.$layer = new Ox.Element() // fixme: Layer widget, that would handle click?
-            .addClass("OxLayer");
+            .addClass("OxLayer")
+            .mousedown(mousedownLayer)
+            .mouseup(mouseupLayer);
 
         function center() {
             that.css({
@@ -1348,6 +1350,18 @@ requires
             
         }
 
+        function mousedownLayer() {
+            that.$layer.stop().animate({
+                opacity: 0.5
+            }, 100);
+        }
+
+        function mouseupLayer() {
+            that.$layer.stop().animate({
+                opacity: 0
+            }, 100);
+        }
+
         function reset() {
             that.width(self.options.width);
             that.height(self.options.height);
@@ -1432,7 +1446,7 @@ requires
             reset();
             that.css({
                 opacity: 0
-            }).appendTo(that.$layer).animate({
+            }).appendTo($body).animate({
                 opacity: 1
             }, 200);
             return that;