【问题标题】:How to change the default width of pnotify Jquery plugin?如何更改 pnotify Jquery 插件的默认宽度?
【发布时间】: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/

【问题讨论】:

    标签: jquery iphone css responsive-design 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
          • 好吧,我只是在语法中添加了一个额外的分号。无论如何,非常感谢:)
          猜你喜欢
          • 2016-09-29
          • 2012-02-13
          • 2012-10-19
          • 1970-01-01
          • 2017-01-25
          • 1970-01-01
          • 2014-08-27
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多