CODEWITHSUNDEEP
angularjsmodal-dialog
Gabriel Matusevich
Gabriel Matusevich

Reputation: 3855

Adding additional classes to AngularJS Modal UI.Bootstrap modal

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

            }

Upvotes: 10

Views: 10436

Answers (2)

Yogesh
Yogesh

Reputation: 1585

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

Upvotes: 7

Arun Bisht
Arun Bisht

Reputation: 41

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');
                    };
                },
            });

Upvotes: 4

Related Questions