Bootstrap-notify notification with modal panels , appears under the disables blurry area

Question

I have a modal panel for login/ sign-up operations and I am notifying in case of unsuccessful login with bootstarp-notify , but notification appears on the blurry (disabled area) out of the modal panel. I am wondering how can I attache my notification to my modal panel or (this one will be a better solution for me) how can I show the notification on foreground and not under the blurry disables screen. I checked the "element" parameter in bootstarp-notify documentation but I couldn't find out how should I use that. should I use the jquery selector to point out the element or just id or name.

Answer 1

Just give the z_index setting a higher value.

For example, try this code:

$.notify({
    // options
    message: 'Error message goes here' 
},{
    // settings
    type: 'danger',
    z_index: 2000,
});

Answer 2

It seems that z_index attribute do the magic. if we increase it to a higher value like 2000 or 3000 (Default value is 1031) , the notification moves to the foreground( above the modal panel disables area). I have still no idea what are these numbers and where they are come from.