Modal close button will not click after styling

Question

I'm trying to just add a simple close button to a modal window and as long as I don't style the close button it works. The problem is, I need to style it.

I know variants of this issue have cropped up but the button in question here isn't just in the page HTML. It's a simple modal window that is created in a factory. It has the following config settings:

    var modalScope = $rootScope.$new();
    var confirmationModalSetup = {
        templateUrl: 'views/ui-framework/confirmation-modal.html',
        controller: 'ConfirmationModalCtrl',
        keyboard: false,
        backdrop: 'static',
        scope: modalScope
    };

I'm not sure why they went with rootScope but it is what it is, I feel like the scoping is okay because the ng-click function gets called as long as I don't style the button. I thought of adding a listener to it, but when I try and do so in the controller it always gets called before the modal exists, so the button element doesn't exist yet to apply the listener to.

It seems like this should be a very common thing so I'm sure I'm missing something simple - any ideas?

Answer 1

Okay after some more tinkering I got it. By adding these entries to the CSS style it seemed to wake the button up:

position: relative; z-index: 100;