Dynamic Div Overlay

A directive that creates a div overlay that will detect the size of the element upon which it is placed and create an overlay of the same size with specified opacity and z index..

HTML

<div id="container">
    <div class="divClass">
        <div class="fill">
          <button onclick="alert('outch...');" />
        </div>
        hey div!
    </div>
</div>

CSS

.divClass
{
    height: 200px;
    width: 200px;
    border: 1px black solid;
    background-color: tan;
    font-size: 24px;
    font-family: arial, sans-serif;
    text-align: center;
}

.overlay
{
    background-color: green;
    opacity: 0.5;
}

.fill
{
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: red;
    position: absolute;
}

#container
{
    padding: 40px;
    background-color: purple;
}

JavaScript

var overlayMod = angular.module('overlay', []);

overlayMod.directive('overLay', [function () {
    return {
        restrict: 'A',
        replace: false,
        template: '<div ng-style="{{style}}"></div>',
        link: function () {
        }
    };
}]);