简体   繁体   English

使用jNotify插件进行jquery

[英]using the jNotify plugin for jquery

I am currently using jNotify to display my notifications. 我当前正在使用jNotify来显示我的通知。 The problem is that all notifications seem to float over the website, instead of pushing the website down. 问题在于所有通知似乎都在网站上浮动,而不是将网站下推。 I have looked at the above link and I can seen an option: 我看了上面的链接,可以看到一个选项:

classContainer: "jnotify-container"       // className to use for the outer most container--this is where all the 

How do I make use of this and will it push the website content down while the notification is being displayed? 我如何利用此通知,并在显示通知时将其压低网站内容?

That's simply the class name that gets applied to the container element. 那只是应用于容器元素的类名。 How that element looks is determined entirely by CSS. 该元素的外观完全由CSS决定。

Knowing the class name, you can write any CSS rules you like. 知道了类名,您可以编写任何喜欢的CSS规则。 The rule that makes the notification float on top of the site is position: fixed; 使通知浮动在网站顶部的规则是position: fixed; and changing that to position: static; 并将其更改为position: static; (the default value for position ) will solve the "floating on top of the site" problem. position的默认值)将解决“在网站顶部浮动”问题。

However, you'll then have a bigger problem. 但是,您将会遇到更大的问题。 The reason jNotify's style is to float on top of the site is that it guarantees the notification will always be visible. jNotify的样式浮动在网站顶部的原因是,它确保通知始终可见。 If I have scrolled partway down the page and your notification is statically positioned at the top, I won't see it! 如果我在页面的中部向下滚动,而您的通知静态地位于顶部, 则看不到它!

The classContainer part of jNotify seems to be broken, as they're not actually using that property. jNotify的classContainer部分似乎已损坏,因为它们实际上并未使用该属性。

The quickest work around I can see is to do the following: 我能看到的最快的解决方法是执行以下操作:

  1. Open jquery.jnotify.js 打开jquery.jnotify.js
  2. Find line 130 and change "appendTo" to "prependTo" 找到第130行并将“ appendTo”更改为“ prependTo”
  3. In jquery.jnotify.css remove the following on lines 2, 3 and 4: 在jquery.jnotify.css中,在第2、3和4行中删除以下内容:

    position: fixed; 位置:固定;

    top: 0; 顶部:0;

    left: 0; 左:0;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM