jquery - 调整 PNotify 通知的初始位置

Question

我正在尝试调整我的 PNotify 通知的初始位置。正如您在图像中看到的，通知阻止了我的搜索栏。我想将通知的初始位置降低大约 50 像素，这样它就不会阻塞搜索栏。

我已经在谷歌上搜索这个问题很长时间了，但没有结果：

我试过了：

1. 通过添加一个更改通知的 CSSmargin-top: 50px

2. 在文档下有自定义类来更改初始位置，但它们都是自定义类，如stack_bar_topor stack_bar_bottom。我想自己调整这些值。

3. Github页面上的这个答案，但我被抛出了no such class as pnotify.css错误

这是我目前的 PNotify 代码：

    function notification(text, type) {
        new PNotify({
            text: text,
            type: type,
            animation: 'slide',
            delay: 3000,
            top:"500px",
            min_height: "16px",
            animate_speed: 400,
            text_escape: true,
            nonblock: {
                nonblock: true,
                nonblock_opacity: .1
            },
            buttons: {
                show_on_nonblock: true
            },
            before_open: function(PNotify){
                PNotify.css({
                    "top":"50px"
                });
            }
        });
    }

我检查了CSS，它似乎ui-pnotify负责定位。默认值为top: 25px.

我在我的 CSS 中创建了一个新类并将其命名为：

.ui-pnotify {
  top: 50px;
}

然而，似乎没有用。

Answer 1

在您的配置中，设置firstpos1变量。

因此，当您定义堆栈时，它可能如下所示：

const defaultStack = {
    dir1: 'down',
    dir2: 'left',
    firstpos1: 50, // This is the initial position of the first popup relative to dir1
    firstpos2: 20,
    spacing1: 10,
    spacing2: 10,
    push: 'top',
    overlayClose: true,
    modal: false,
    context: document.body
};

来源：PNotify GitHub 页面

Answer 2

下载最新版本的 pnotify 并使用以下代码修改 css 文件中选择器的样式.ui-pnotify（在我的情况下，我使用 pnotify.custom.min.css）：

.ui-pnotify {
      top: 50px;/*Replace the 25px with the top that you need*/
      right:25px;
      position:absolute;
      height:auto;
      z-index:9999
    }