更新

Question

我的问题是页面上的内容显示在通知上方。我尝试使用.ui-notify的z-index，但这并未改变任何内容。

此外，即使我指定type: "error"或type: "success"，通知也始终为白色。

我错过了什么吗？谢谢！

更新

我通过以下css实现了PNotify（带Bootstrap）通知的外观和感觉（需要FontAwesome）。请参阅 DEMO 。

/* 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;
}

Answer 1

这不是z索引问题，而是由于某种原因，通知上的背景颜色是透明的。你的CSS或它加载的订单有问题......

更新了 DEMO

通过将这些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;    
}

在jQuery Mobile上进行PNotify - 样式问题

更新

1 个答案: