Creating a simple modal directive

Modal windows are interface components often used in web applications. Building them is very simple and is done using libraries such as Dojo or jQuery, but implementing them in AngularJS applications is not as simple, since the DOM manipulation is restricted to directives.

Next, we will see how to use this component in a very simple way.

Getting ready

Let's start placing the following HTML code in a new blank page. The following code has all the basic requisites to illustrate the example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.x/angular.js"></script>
<title>Modal Window Directive</title>
<style>
  .modal-overlay {
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000;
  opacity: 0.8;
}
.modal-background {
  z-index:10000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;

}
.modal-content {
  padding:10px;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  display: inline-block;
}
</style>
</head>
<body ng-app='SimpleModal'>
</body>
</html>

For this simple example, we placed the CSS code inside the style tag on the same HTML file; don't do that in production.

How to do it…

Now we can create our modal directive with the following code:

// Creating a simple Modal Directive
app = angular.module('SimpleModal', []);

app.directive('modalWindow', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with template
    transclude: true, // To use custom content
    link: function(scope, element, attrs) {

      scope.windowStyle = {};

      if (attrs.width) {
        scope.windowStyle.width = attrs.width;
      }
      if (attrs.height) {
        scope.windowStyle.height = attrs.height;
      }

      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div ng-show='show'><div class='modal-overlay' ng-click='hideModal()'></div><div class='modal-background' ng-style='windowStyle'><div class='modal-close' ng-click='hideModal()'>X</div><div class='modal-content' ng-transclude></div></div></div>"
  };
});

Add the controller's code:

app.controller('ModalCtrl', ['$scope',
  function($scope) {
    $scope.modalShown = false;
    $scope.toggleModal = function() {
      $scope.modalShown = !$scope.modalShown;
    };
  }
]);

Finally, include the directives tags into the body tag of our HTML file:

<div ng-controller='ModalCtrl'>
  <button ng-click='toggleModal()'>Open Modal</button>
  <modal-window show='modalShown' width='400px' height='60%'>
  <p>Hello Simple Modal Window<p>
  </modal-window>
</div>

How it works…

The work here is very simple; we just placed an HTML template using the inline template, as we did in the previous example:

template: "<div ng-show='show'><div class='modal-overlay' ng-click='hideModal()'></div><div class='modal-background' ng-style='windowStyle'><div class='modal-close' ng-click='hideModal()'>X</div><div class='modal-content' ng-transclude></div></div></div>"

As we build everything from scratch, we need to style the HTML tags with CSS classes for a better look using the style tag inside the head element. In production applications, you must have a separated file for CSS styles.

The inline template contains the built-in directives ng-show() and ng-style(), along with a ng-click() function to hide the modal.

The ng-style() directive is not used often, but we include it in this example just to illustrate how we can place inline styles inside a directive.

Inline templates are very useful, but not too flexible. On large application managers, different inline templates can be very painful to use and take a lot of time. Use them with small templates. In the next recipe, we will see how to use external templates on custom directives.

There's more…

We can also use the ng-transclude in-built directive to remove any content from the DOM before the modal content inserted.

AngularJS Directives Cookbook

By : Fernando Monteiro

AngularJS Directives Cookbook

By: Fernando Monteiro

Overview of this book

Creating a simple modal directive

Getting ready

How to do it…

How it works…

There's more…

See also

AngularJS Directives Cookbook

By : Fernando Monteiro

AngularJS Directives Cookbook

By: Fernando Monteiro

Overview of this book

Creating a simple modal directive

Getting ready

How to do it…

How it works…

There's more…

See also

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access