How to Create a Simple Modal Dialog Directive in Angular.js

December 12, 2013

<h3 id="modals-are-easy">Modals are Easy</h3> I’ve used a dozen or so modal / lightbox plugins over the years, almost exclusively jQuery-based. But you know what I didn’t realize until fairly recently? Modals are easy to build yourself from scratch. So let’s make one in the Angular fashion. <h3 id="the-requirements">The Requirements</h3> I want to be able to create a modal with the following HTML: <div class="highlight"><pre class="highlight html"><code><modal-dialog show='modalShown' width='750px' height='90%'> Modal Content Goes here </modal-dialog> </code></pre></div> And I’d like it to have the following features: <ul> <li>Toggle it by setting a single $scope variable to true or false (above, the variable is <code>modalShown</code>)</li> <li>Optionally specify the height and width as either a px or % value.</li> <li>Overlay the rest of the screen</li> <li>Close by either clicking an X in the corner or outside the dialog</li> </ul> <h3 id="the-directive-code">The Directive Code</h3> This is a fairly simple directive, with a link function that’s only a few lines long. The <code>show: '='</code> in the isolated scope sets up a 2-way binding between the variable given to the <code>show</code> attribute and the <code>show</code> variable on our scope. Setting this to true or false will toggle our modal dialog. And we check for height and width attributes and, if set, give the modal dialog an inline style. Finally, the <code>hideModal()</code> method simply sets the <code>show</code> variable to false. <div class="highlight"><pre class="highlight javascript"><code>app.directive('modalDialog', function() { return { restrict: 'E', scope: { show: '=' }, replace: true, // Replace with the template below transclude: true, // we want to insert custom content inside the directive link: function(scope, element, attrs) { scope.dialogStyle = {}; if (attrs.width) scope.dialogStyle.width = attrs.width; if (attrs.height) scope.dialogStyle.height = attrs.height; scope.hideModal = function() { scope.show = false; }; }, template: '...' // See below }; }); </code></pre></div> <h3 id="the-template">The Template</h3> The template is also fairly basic. Note that the <code>ng-transclude</code> indicates where your modal content will go. And also note the use of <code>ng-style</code>, which will translate a javascript object into an inline style. <div class="highlight"><pre class="highlight html"><code><div class='ng-modal' ng-show='show'> <div class='ng-modal-overlay' ng-click='hideModal()'></div> <div class='ng-modal-dialog' ng-style='dialogStyle'> <div class='ng-modal-close' ng-click='hideModal()'>X</div> <div class='ng-modal-dialog-content' ng-transclude></div> </div> </div> </code></pre></div> <h3 id="the-css">The CSS</h3> I’m not going to spend any time going over this, but I will say that the following will only work in modern browsers (specifically the translate function). If you need <= IE9 support, you’ll need center the dialog using a different method. <div class="highlight"><pre class="highlight css"><code>.ng-modal-overlay { /* A dark translucent div that covers the whole screen */ position:absolute; z-index:9999; top:0; left:0; width:100%; height:100%; background-color:#000000; opacity: 0.8; } .ng-modal-dialog { /* A centered div above the overlay with a box shadow. */ z-index:10000; position: absolute; width: 50%; /* Default */ /* Center the dialog */ top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background-color: #fff; box-shadow: 4px 4px 80px #000; } .ng-modal-dialog-content { padding:10px; text-align: left; } .ng-modal-close { position: absolute; top: 3px; right: 5px; padding: 5px; cursor: pointer; font-size: 120%; display: inline-block; font-weight: bold; font-family: 'arial', 'sans-serif'; } </code></pre></div> <h3 id="triggering-the-modal">Triggering the Modal</h3> Finally, to put it all together, you’ll need to add a small bit of code to your HTML and controller. <div class="highlight"><pre class="highlight html"><code><button ng-click='toggleModal()'>Open Modal Dialog</button> <modal-dialog show='modalShown' width='750px' height='60%'> Modal Content Goes here </modal-dialog> </code></pre></div><div class="highlight"><pre class="highlight javascript"><code>app.controller('MyCtrl', function($scope) { $scope.modalShown = false; $scope.toggleModal = function() { $scope.modalShown = !$scope.modalShown; }; }); </code></pre></div> <h3 id="all-together">All Together</h3> And that’s it! I put all the code together in a demo <a href="http://jsbin.com/aDuJIku/2">on JSBin</a>. Check it out. And I’ve put a slightly more polished and configurable version of this directive up <a href="http://github.com/adamalbrecht/ngModal">on Github</a>.

#angularjs #javascript