Pnotify - show notification over modal background

Question

I'm using Bootstrap js to show a modal window, where the user can add some values. If there's a problem with the addition i want to notify it, by using pnotify notifications.

Everything well so far, the problem is that the pnotify notification appears under the modal window's darkened background, and i would like instead to appear on top of that.

$.pnotify({
            title: 'Regular Notice',
            text: 'Check me out! I\'m a notice.',
            nonblock: true,
            history: false,
            delay: 60000
        });

This is how it currently appears: http://screencloud.net/v/ihln

How could i achieve this?

Thanks!

Answer 1

It has nothing to do with modals actually. This is because you are using old version of pnotify with bootstrap2 styles and it has no css class assigned for default notify, hence it has no background whatsoever.

Update your pnotify version and set $.pnotify.defaults.styling = "bootstrap3";

Here is updated Fiddle.

Answer 2

Just add another class and set your z-index to 10000 or even more. It solves it for me

// My CSS
.always{z-index: 100000; padding: 0px; margin: 0px }


//Notify 
new PNotify({
        title: 'Error Sending!',
        text: 'You must enter a mobile number or email to continue',
        type: 'error',
        addclass: 'stack-bar-top',
        addclass: 'always',
        width: "100%"
    });