Pnotify - 在模态背景上显示通知答案

【问题标题】：Pnotify - show notification over modal backgroundPnotify - 在模态背景上显示通知
【发布时间】：2014-01-21 13:53:56
【问题描述】：

我正在使用 Bootstrap js 来显示一个模式窗口，用户可以在其中添加一些值。如果添加有问题，我想通知它，使用 pnotify 通知。

到目前为止一切顺利，问题是 pnotify 通知出现在模态窗口的深色背景下，而我希望出现在它之上。

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

这是它目前的显示方式： http://screencloud.net/v/ihln

我怎样才能做到这一点？

谢谢！

【问题讨论】：

我猜想添加 <style>.pnotify-ui{z-index:1041}</style> 会解决它，因为引导程序的模态使用 1040 作为 z-index。
@BradChristie Thx，但如果你查看 pnotify css，zindex 设置为 9999
你是对的； opacity 似乎覆盖了z-index，尽管我不确定为什么。
如果有人想要一个 jsFiddle 玩：jsfiddle.net/p6KUG
@BradChristie 怪怪的，如果你尝试设置 type:'success'，它会正确显示在顶部 - jsfiddle.net/WzajS

标签： javascript css twitter-bootstrap pnotify

【解决方案1】：

它实际上与模态无关。这是因为您使用的是具有 bootstrap2 样式的旧版本 pnotify，并且它没有为默认通知分配 css 类，因此它没有任何背景。

更新你的 pnotify 版本并设置$.pnotify.defaults.styling = "bootstrap3";

这里更新Fiddle。

【讨论】：

【解决方案2】：

只需添加另一个类并将您的 z-index 设置为 10000 甚至更多。它为我解决了它

// 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%"
    });

【讨论】：