0

我的问题是页面上的内容出现在通知上方。我尝试使用.ui-notify's z-index，但这并没有改变任何东西。

此外，通知始终是白色的，即使我指定了type: "error"or type: "success"。

演示

我错过了什么吗？谢谢！

更新

我实现了使用以下 css（需要 FontAwesome）获得 PNotify（使用 Bootstrap）通知的外观和感觉。见演示。

/* info */
.ui-pnotify-container{
    color: #31708f !important;
    background-color: #d9edf7 !important; 
    border-color: #bce8f1;
    background: none;
}

/* error */
.ui-pnotify-container.ui-state-error {
    color: #a94442 !important;
    background-color: #f2dede !important; 
    border-color: #ebccd1;
    background: none;
}

/* success */
.ui-state-default {
    color: #3c763d !important;
    background-color: #dff0d8 !important; 
    border-color: #d6e9c6;
    background: none;
}

/* warning */
.ui-pnotify-container.ui-state-highlight {
    color: #8a6d3b !important;
    background-color: #fcf8e3 !important; 
    border-color: #faebcc;
    background: none;
}

.ui-pnotify-container .ui-icon {
    background: none;
}

.ui-icon-close{
    position: relative;
    text-indent: 0px;
    width: 24px;
    height: 24px;
    margin-right: 20px;
}

.ui-icon-close:before {
    content: "\f00d";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;           
    position: absolute;
}
4

1 回答 1

0

这不是 z-index 问题，而是通知上的背景颜色由于某种原因是透明的。您的 CSS 或其加载顺序有问题...

更新了演示

通过将这些 CSS 规则添加到您的小提琴中，通知不再透明：

.custom-notif {
    background: white;
}
.ui-state-error {
    background: red;
    text-shadow: none;
}
.ui-state-default {
    background: green;
    text-shadow: none;
}
.ui-state-highlight {
    background: blue;
    text-shadow: none;    
}
于 2014-07-22T19:50:19.393 回答