Alert over Modal

Question

I'm trying to show this alert on top of the Modal but unable to get it working. Instead, it shows behind the Modal.

The html:

    <alert class="alertmessage" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
            <small>{{alert.msg}}</small>
    </alert>

The CSS:

    .alertmessage {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 300px;
        margin-left: -150px;
        margin-top: -100px;
        text-align: center;
        z-index: 99999 !important;
        outline: 9999px solid rgba(0,0,0,0.8);
        border-radius: 0px;
    }

The modal css goes like this:

    element.style {
        z-index: 1040;
        display: block;
    }

What am I missing? I want to see the alert coming on top of the Modal.

Answer 1

Here's an updated Fiddle that's working for you. http://jsfiddle.net/benxmf5y/5/

The only change I made was to add

z-index: 999999;