Anpassen von Modalen mit angular-modal-service (AngularJS)

Question

Ich benutze (angular-modal-service) um Popups und Modals über einen Service zu erstellen, aber ich würde gerne wissen, wie es möglich ist, sie anzupassen? Zum Beispiel, wie kann ich die modal-header Farbe ändern oder die "standardmäßig" Zeilen zwischen der Kopfzeile, Körper und Fußzeile entfernen? Vielen Dank.

Beispiel der Controller:

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

}); 

Probe des 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

Ihre Frage ist eine CSS-Frage.

Um modale Farben oder Rahmen zu ändern, müssen Sie ein benutzerdefiniertes CSS hinzufügen.

Sie können mit dem Google Dev-Tool spielen, um Stile zu ändern und die Ergebnisse in Echtzeit anzuzeigen, sodass Sie die Seite nicht erneut laden müssen.

in Fußzeile

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

zu verbergen Grenze:

Um Kopffarbe zu ändern

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

Answer 2

Sie CSS für das verwenden können, sonst ist es in Richtlinie benutzerdefinierte konvertieren