Personalizzazione di modali con angular-modal-service (AngularJS)

Question

Sto usando (angular-modal-service) per creare popup e modali tramite un servizio ma vorrei sapere come è possibile personalizzarli? Ad esempio, come posso cambiare il colore modal-header o rimuovere le linee "di default" tra l'intestazione, il corpo e il piè di pagina? Grazie.

Campione dei controllori:

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 
}; 

}); 

Campione del HTML:

<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script> 
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script> 

<div class="container" ng-app="app" ng-controller="Controller"> 

    <h3>Angular Modal Service</h3> 
    <a class="btn btn-default" href ng-click="show()">Show a Modal</a> 
    <p>{{message}}</p> 

    <!-- The actual modal template, just a bit o bootstrap --> 
    <script type="text/ng-template" id="modal.html"> 
     <div class="modal fade"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Yes or No?</h4> 
       </div> 
       <div class="modal-body"> 
       <p>It's your call...</p> 
       </div> 
       <div class="modal-footer"> 
       <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button> 
       <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button> 
       </div> 
      </div> 
      </div> 
     </div> 
    </script> 

</div> 

Answer 1

La tua domanda è una domanda CSS.

Per modificare i colori o i bordi modali è necessario aggiungere un CSS personalizzato.

Puoi giocare con google dev tool per cambiare gli stili e vedere i risultati in tempo reale in modo da non dover ricaricare la pagina.

Per cambiare intestazione colore:

.modal-header { 
    background-color: red; 
} 

Per nascondere confine a piè di pagina:

.modal-footer { 
    border-top: 0px!important; 
} 

Answer 2

È possibile utilizzare i CSS per che altrimenti convertire in direttiva personalizzato