如何设置pnotify的顶部中心位置

时间:2014-10-03 15:39:09

标签: position pnotify

如何设置非像素位置? 我试试这个

var stack = { "dir1": "down", "dir2": "right", "firstpos1": 50, "firstpos2": 50 };

但是由于屏幕分辨率不同,我认为这很糟糕。

2 个答案:

答案 0 :(得分:7)

Necroposting,但可能对其他搜索者有所帮助。我没有js重新计算的解决方案:

<强> JS:

new PNotify({
    ...
    addclass: 'pnotify-center'
});

<强>的CSS:

.pnotify-center {
   right: calc(50% - 150px) !important;
}

答案 1 :(得分:1)

这是一个类似的问题,答案为here。根据{{​​3}}中的第一个示例,您可以通过在before_open中设置top / left css propreties来使通知的初始位置居中。每次调整窗口大小时,您还需要重新定位通知。

&#13;
&#13;
function get_center_pos(width, top) {
  // top is empty when creating a new notification and is set when recentering
  if (!top) {
    top = 30;
    // this part is needed to avoid notification stacking on top of each other
    $('.ui-pnotify').each(function() {
      top += $(this).outerHeight() + 20;
    });
  }

  return {
    "top": top,
    "left": ($(window).width() / 2) - (width / 2)
  }
}
$(document).ready(function() {

  new PNotify({
    title: "this is center",
    text: "blablabla",
    opacity: 0.90,
    type: "info",
    width: "390px",
    before_open: function(PNotify) {
      PNotify.get().css(get_center_pos(PNotify.get().width()));
    }
  });

  $(window).resize(function() {
    $(".ui-pnotify").each(function() {
      $(this).css(get_center_pos($(this).width(), $(this).position().top))
    });
  });
});
&#13;
&#13;
&#13;