started Overlay

Makefile

@@ -2,6 +2,6 @@
 ui:
 	@rm -fr build
 	@mkdir build
-	@./support/build.js dialog confirmation
+	@./support/build.js dialog overlay confirmation
 
 .PHONY: ui

build/ui.css

@@ -57,7 +57,23 @@
 #dialog .actions button.main:active {
   background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
 }
-.confirmation .actions {
+#overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.75);
+  -webkit-transition: opacity 300ms;
+  z-index: 500;
+  pointer-events: auto;
+}
+
+#overlay.hide {
+  pointer-events: none;
+  opacity: 0;
+}.confirmation .actions {
   border-top: 1px solid #eee;
   padding: 5px;
   text-align: right;

build/ui.js

@@ -127,6 +127,28 @@ Dialog.prototype.close = function(){
 };
 
 })(ui, "<div id=\"dialog\" class=\"hide\">\n  <div class=\"content\">\n    <h1>Title</h1>\n    <p>Message</p>\n  </div>\n</div>");
+// overlay component
+
+;(function(exports, html){
+
+exports.Overlay = Overlay;
+
+function Overlay() {
+  this.el = $(html);
+  this.el.appendTo('body');
+}
+
+Overlay.prototype.show = function(){
+  this.el.removeClass('hide');
+  return this;
+};
+
+Overlay.prototype.hide = function(){
+  this.el.addClass('hide');
+  return this;
+};
+
+})(ui, "<div id=\"overlay\" class=\"hide\"></div>");
 // confirmation component
 
 ;(function(exports, html){

lib/components/overlay/overlay.css

@@ -0,0 +1,16 @@
+#overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.75);
+  transition: opacity 300ms;
+  z-index: 500;
+}
+
+#overlay.hide {
+  pointer-events: none;
+  opacity: 0;
+}

lib/components/overlay/overlay.html

@@ -0,0 +1 @@
+<div id="overlay" class="hide"></div>

lib/components/overlay/overlay.js

@@ -0,0 +1,17 @@
+
+exports.Overlay = Overlay;
+
+function Overlay() {
+  this.el = $(html);
+  this.el.appendTo('body');
+}
+
+Overlay.prototype.show = function(){
+  this.el.removeClass('hide');
+  return this;
+};
+
+Overlay.prototype.hide = function(){
+  this.el.addClass('hide');
+  return this;
+};

test/index.html

@@ -31,6 +31,14 @@
             });
           return false;
         });
+
+        $('li:nth-child(4) a').click(function(){
+          var overlay = new ui.Overlay().show();
+          setTimeout(function(){
+            overlay.hide();
+          }, 2000);
+          return false;
+        });
       });
     </script>
     <style>
@@ -45,6 +53,7 @@
       <li><a href="#">Dialog</a></li>
       <li><a href="#">Dialog without title</a></li>
       <li><a href="#">Confirmation</a></li>
+      <li><a href="#">Overlay</a></li>
     </ul>
   </body>
 </html>