Thursday, 9 October 2014

Create a Custom element tag ngZLayer to form a gray out above any element or Div in HTML5 using angular js

In this blog post we are going to see how to gray out above any element tags, using angular js, so to do we are going to create a custom element which will make the child element of that tag to Grayout using the property value as true, when the property value as false , it will remove the gray out above the div or element.

Steps to do :

add the following line
<script type="application/javascript" src="ang/ng-zLayer.js"></script>

place an element above the element which you want to grayout dynamically or statically .
<ng-z-layer value="second"></ng-z-layer>

set the value to true to gray out or false to display as normal


<body ng-app="valueApp">
<div ng-controller="sample">

        <input type="button" value="Change First Value" ng-click="ChangeF()">
        <input type="button" value="Change Sec Value" ng-click="ChangeS()">

    <ng-z-layer value="first">
    <div style="background-color:darkblue;width: 400px;height: 200px;;margin: 10px">

            <table style="margin: 10px">
            <fieldset style="color: #ffffff">Employee Registration</fieldset>
           <tr><td> <label style="color: #ffffff">user Name</label></td>
                <td><input type="text" /></td></tr>
           <tr><td> <label style="color: #ffffff">Address</label></td>
                <td><input type="text" /></td></tr>
             <td><input type="button" value="Submit" style="color: #000000"> </td></tr>

    <ng-z-layer value="second">
    <div style="background-color: orangered;width: 300px;height: 200px;margin:10px">
        <form style="margin: 10px">
            <fieldset>Student Registration</fieldset>
            <label>Student Name</label><input type="text" />
            <label>Class</label><input type="text" />
            <input type="button" value="Submit">




var valueApp = angular.module('valueApp', []);
valueApp.controller('sample', function ($scope) {
    $scope.first = false;
    $scope.second = false;

    $scope.ChangeF = function () {
        $scope.first = !$scope.first;

    $scope.ChangeS = function () {
        $scope.second = !$scope.second;


 * Created by Rajesh on 09-10-2014.

angular.module('ngZLayer.directive', [])
.directive('ngZLayer', function () {

    return {
        restrict: 'E',
        scope: {
            value: '='
        link: function (scope, element, attrs, cntrl) {

            scope.ChangeVisible = function () {
                if (scope.value != undefined) {
                    if (scope.value == true) {
                        element.css('opacity', '0.5');
                        element.css('pointer-events', 'none');
                        element.css('z-index', '20');
                        element.css('display', 'block');
                        element.css('filter', 'alpha(opacity = 55)');
                        element.css('width', element.child().css('width'));
                        element.css('height', element.child().css('height'));
                    else {
                        element.css('opacity', '1');
                        element.css('pointer-events', 'all');

            scope.$watch('value', function () {
                if (scope.value != undefined) {


angular.module('ngZLayer', ['ngZLayer.directive']);

Before Gray out

After Gray out dynamically in button click

From this post you can learn how to gray out above any element using the custom element tag ngZLayer.

No comments:

Post a Comment