PNotify -- 通知弹窗的使用的部分问题

问题：

         使用pnotify构建消息弹窗（web应用下）

参考：

         官网

         GitHub

         npm仓库

         个人推荐看npm仓库

过程：

         在使用pnotify的过程中，最重要的也就是stack配置，设置弹出的位置、动画等。

         简单看一下PNotify的使用

const stackBottomModal = {
  dir1: "up", // With a dir1 of "up", the stacks will start appearing at the bottom.
  // Without a `dir2`, this stack will be horizontally centered, since the `dir1` axis is vertical.
  firstpos1: 25, // The notices will appear 25 pixels from the bottom of the context.
  // Without a `spacing1`, this stack's notices will be placed 25 pixels apart.
  push: "top",
  dir2: "left",
  firstpos2: 25, // Each new notice will appear at the bottom of the screen, which is where the "top" of the stack is. Other notices will be pushed up.
  modal: true, // When a notice appears in this stack, a modal overlay will be created.
  overlayClose: true, // When the user clicks on the overlay, all notices in this stack will be closed.
  context: document.getElementById("page-container")  // The notices will be placed in the "page-container" element.
};

function notice() {
  PNotify.alert({
    title: "Alert",
    text: "This is an alert.",
    width: "auto",
    type: ['notice', 'info', 'success', 'error'][Math.floor(Math.random() * 3.9999)],
    stack: stackBottomModal,
    hide: false 
  });
}

function timer() {
  setTimeout(() => {
    notice();
    timer();
  }, (Math.random() * 4000) + 4000);
}

notice();
//timer();

          这是一个简单的消息弹窗，要理解的关键是stack的配置

          指出几个重要的属性：dir1,firstpos1,dir2,fistpos2,push

Stack properties:

dir1 - The primary stacking direction. Can be 'up', 'down', 'right', or 'left'.
firstpos1 - Number of pixels from the edge of the context, relative to dir1, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
spacing1 - Number of pixels between notices along dir1. If undefined, 25 will be used.
dir2 - The secondary stacking direction. Should be a perpendicular direction to dir1. The notices will continue in this direction when they reach the edge of the viewport along dir1.
firstpos2 - Number of pixels from the edge of the context, relative to dir2, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
spacing2 - Number of pixels between notices along dir2. If undefined, 25 will be used.
push - Where, in the stack, to push new notices. Can be 'top' or 'bottom'.
modal - Whether to create a modal overlay when this stack's notices are open.
overlayClose - Whether clicking on the modal overlay should close the stack's notices.
context - The DOM element this stack's notices should appear in. If undefined, document.body will be used.

          这里的理解就很有趣（脑残）了

The firstpos* values are relative to an edge determined by the corresponding dir* value.
dirX === 'up' - firstposX is relative to the bottom edge.
dirX === 'down' - firstposX is relative to the top edge.
dirX === 'left' - firstposX is relative to the right edge.
dirX === 'right' - firstposX is relative to the left edge.

          dirX的位置与与dirX方向按相反的方向理解，因为dir指的是活动（包含如果弹出过多数量的弹窗，超出屏幕宽度，向旁边换行）指向的方向。

          然后push指的是推送的方向。

          在使用过程，可能碰到一个问题。就是设置距离底部某高度（我设置为50px）时，css并不生效，反而是默认的css生效为距离顶端36px，通过控制台查看到top:36px的默认配置生效。

          在作者推荐的sandbox中，发现并没有这个问题，仔细想来可能是css和js加载顺序的问题，但是反复调整，就是不行，然后还是选择在源文件中把默认的top注释掉。（有个问题：为什么right:36px就没有生效，反而是top生效了？求解）

总结：

个人感觉其实pnotify并不是一个简单的推送消息的方式，我下次可能考虑使用其他的

           1.文档没有中文，虽然英文能看起来也没有什么问题

           2.在中国使用的人数不是太多，如果有点小问题，确实不好找到解决的方案

           3.pnotify本身确实很完善，细节很多，但是一般人用不了这么多，反而加重了理解的难度