如何更改 pnotify Jquery 插件的默认宽度？

Posted 2023-03-06

【中文标题】如何更改 pnotify Jquery 插件的默认宽度？

【英文标题】：How to change the default width of pnotify Jquery plugin?

【发布时间】：2013-09-20 17:34:18

【问题描述】：

我正在使用这个 pnotify 插件在我的网站上显示工具提示通知。工具提示的默认宽度为 300 像素，但在 iphone 上显示不正确。 那么我怎样才能改变它的宽度呢？ 如果我检查 element ，我会看到 width:300px 是一个内联样式属性。我进入jquery.pnotify.min.js 文件并删除了width:300px 属性，并在pnotify.css 文件中为.ui-notify 添加了我自己的自定义宽度。但是宽度仍然没有改变。

有什么想法吗？

插件链接：

http://pinesframework.org/pnotify/

【参考方案1】：

我意识到这个问题已经过时并且已经有一个可以接受的答案 - 但是有更好的方法来设置 pnotify 弹出窗口的“默认宽度”，而无需使用带有 !important 标志的 css 来覆盖实际的默认值。 javascript：

PNotify.prototype.options.width = "500px";

【参考方案2】：

现在（2014 年 12 月），根据 sources，您拥有 width 属性：

var notice = new PNotify(
  ...,
  // Width of the notice.
  width: "300px",
  ...,
);

如果您只想设置宽度，这将是最好的。

【参考方案3】：

您还可以在通知中添加一个类并执行以下操作：

 var notice = new PNotify(
  ...,
  addclass: 'custom-notif',
  ...,
);

然后用css：

.custom-notif 
    top: 5% !important;
    left: 5% !important;
    width: 90% !important;

这将允许您创建一堆不同的通知（显示在顶部，显示在底部等），而不会覆盖 .ui-notify 的样式。

【参考方案4】：

尝试将!important 添加到您的规则中。这肯定会覆盖它。

例子：

.ui-notify 
    width: 100px !important;

【讨论】：

实际上我有两个不同的 css 文件，一个用于我在 PC 上的主站点，另一个用于移动设备作为 mobile.css .. 我在移动 css 中设置了这个 !imp 属性，但它也影响主站点.我想要的是在主站点上它的宽度为 300px，但在移动站点上它应该是 245px；我该怎么做？

在移动 CSS 中，您应该在 @media 部分和更具体的 CSS 选择器中使用 !important 覆盖它，例如 a.ui-notify（或任何 .ui-notify 标签）。这种方式仅适用于移动设备。你能提供两个 CSS 的摘录吗？ （带@media）。您可以在此处阅读有关 CSS 规则的特殊性：css-tricks.com/specifics-on-css-specificity

好吧，我只是在语法中添加了一个额外的分号。无论如何，非常感谢:)