Adding additional classes to AngularJS Modal UI.Bootstrap modal

Question

I made a function to open modals and I'm having trouble trying to customize them.

According to the Documentation the windowClass parameter should add classes to the modal window, but its not working and I was wondering if any of you made it work

this is my code:

function openModal(title, msg) {

                $rootScope.modalTitle = title;
                $rootScope.modalmsg = msg;

                var notificationModal = $modal.open({
                    templateUrl : "app/modals/NewTicket.html",
                    controller  : function ($scope, $rootScope, $modalInstance) {

                        $scope.myTitle = $rootScope.modalTitle;
                        $scope.modalMsg = $rootScope.modalmsg;

                        $scope.cancel = function () {
                            $modalInstance.dismiss('cancel');
                        };
                    },
                    windowClass : "newTicket"     //THIS IS NOT WORKING
                });

            }

Answer 1

var notificationModal = $modal.open({
                templateUrl : "app/modals/NewTicket.html",
                windowClass : "newTicket",
                controller  : function ($scope, $rootScope, $modalInstance) {

                    $scope.myTitle = $rootScope.modalTitle;
                    $scope.modalMsg = $rootScope.modalmsg;

                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                },
            });

Answer 2

ui-bootstrap creates modal in following hierarchy

<div uib-modal-window="modal-window">
    <div class="modal-dialog ">
        <div class="modal-content">
            <!-- three more divs for header, body and footer-->
        </div>
    </div>
</div> 

The property windowClass adds css class to top most div (div with attribute uib-modal-window)

From your question it appears that, you want to apply your class to div with class modal-content

To achieve this you can do something like this

#add this class to windowClass 
.modal-window-extension {

}

#add your styling rules to this class
.modal-window-extension .modal-dialog .modal-content {
    opacity: 0.95;
    background-color: #2d2626;
}