title: Customizing Modals with angular-modal-service (AngularJS)
body: <p>I'm using (<a href="https://github.com/dwmkerr/angular-modal-service" rel="nofollow"><code>angular-modal-service</code></a>) to create popups and modals via a service but I would like to know how it is possible to customize them? For instance, how can I change the <code>modal-header</code> color or remove the "by default" lines between the header, body and footer? Thank you.</p>
  
  <p><strong>Sample of the controllers:</strong> </p>
  
  <pre><code>var app = angular.module('app', ['angularModalService']);
  
  app.controller('Controller', function($scope, ModalService) {
  
  $scope.show = function() {
      ModalService.showModal({
          templateUrl: 'modal.html',
          controller: "ModalController"
      }).then(function(modal) {
          modal.element.modal();
          modal.close.then(function(result) {
              $scope.message = "You said " + result;
          });
      });
   };
  
  });
  
  app.controller('ModalController', function($scope, close) {
  
  $scope.close = function(result) {
     close(result, 500); // close, but give 500ms for bootstrap to animate
  };
  
  });
  </code></pre>
  
  <p><strong>Sample of the html:</strong> </p>
  
  <pre><code>&lt;script src="https://code.angularjs.org/1.4.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"&gt;&lt;/script&gt;
  
  &lt;div class="container" ng-app="app" ng-controller="Controller"&gt;
  
      &lt;h3&gt;Angular Modal Service&lt;/h3&gt;
       &lt;a class="btn btn-default" href ng-click="show()"&gt;Show a Modal&lt;/a&gt;
       &lt;p&gt;{{message}}&lt;/p&gt;
  
       &lt;!-- The actual modal template, just a bit o bootstrap --&gt;
       &lt;script type="text/ng-template" id="modal.html"&gt;
           &lt;div class="modal fade"&gt;
            &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Yes or No?&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                  &lt;p&gt;It's your call...&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
                  &lt;button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal"&gt;Yes&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
       &lt;/script&gt;
  
  &lt;/div&gt;
  </code></pre>