如何在屏幕顶部显示通知?

2023-12-26

我想用jQuery 通知插件 https://github.com/mickeyren/jquery-notifications,但它总是将通知栏放在页面顶部。因此,如果页面很大,则必须向上滚动到顶部才能看到通知。

是否可以让通知始终显示在浏览器窗口的顶部,这样用户就不必向上滚动到页面顶部?

这是CSS,如果这是应该改变的地方?

/* jQuery Notifications plugin - http://programmingmind.com */
/* notification container */
#jquery-notifications {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100000;
}
#jquery-notifications p {
  text-align: center;
  position: relative;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  border-bottom: 2px solid;
  /* style property for the close text */
}
#jquery-notifications p a {
  position: absolute;
  right: 10px;
  margin-right: 10px;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  padding-right: 5px;
  padding-left: 5px;
}
#jquery-notifications .notice {
  background: #6c9ffc;
  color: #061a72;
  border-color: #061a72;
}
#jquery-notifications .success {
  background: #96f96f;
  color: #045419;
  border-color: #045419;
}
#jquery-notifications .warning {
  background: #f7ae57;
  color: #753903;
  border-color: #753903;
}
#jquery-notifications .error {
  background: #f97c6f;
  color: #570f01;
  border-color: #570f01;
}

由于不知道标记的实际使用方式,我无法为您提供准确的解决方案。

但添加position: fixed;到容器(#jquery-notifications)应该使它始终显示在顶部。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在屏幕顶部显示通知? 的相关文章

  • 悬停时从下到上填充按钮背景,从下到上填充文本颜色

    我需要创建按钮 并且在悬停时它不仅必须从下到上填充背景颜色 而且还必须从下到上更改文本颜色 我对这里的方法很满意 CSS 悬停时背景从下到上填充 https stackoverflow com questions 51562340 css
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • jquery 聚焦/聚焦

    我想要的是将 active 类添加到输入焦点上的输入 当焦点关闭时 删除该类 Thank s 一旦你包含了 jquery 库 它就非常标准了 input focus function this addClass active input b
  • jQuery 日期格式

    如何使用 jQuery 设置日期格式 我正在使用下面的代码但出现错误 txtDate val format date new Date dd M yy 请提出解决方案 在您的页面中添加 jquery ui 插件 txtDate val da
  • UpdatePanel 破坏 JQuery 脚本

    这是我想做的事情的简化版本 基本上我有一个数据列表 里面有很多东西 当你将鼠标悬停在数据列表中的项目上时 我希望 jquery 隐藏 显示东西 问题是 在我进行数据绑定后 如果 gridview repeater datalist 位于更新
  • jquery 上下文菜单插件 - 右键单击​​事件类型在哪里?

    我正在研究下面插件的代码 想知道它在何时何地与 右键单击 事件相关联 它所做的只是 插件参考链接 http www javascripttoolbox com lib contextmenu http www javascripttoolb
  • 试图隐藏选择列表中的选项..不适用于 chrome 和 ie

    我有一个选择列表 其中有很多选项 根据某些输入 我想从选择列表中隐藏一些选项 为了隐藏选择列表中的选项 我编写了jquery 例如 selectlist1 option each function this hide 但这段代码似乎只适用于
  • 取消选择所有复选框后,客户端过滤器显示所有项目

    加载时 复选框将取消选中 并显示所有列表项 当选中过滤器时 将显示相关的列表项 我遇到的问题是 当您再次取消选中所有复选框时 我需要显示所有项目而不是隐藏 这是我的小提琴 http jsfiddle net amesy B9Hnu 124
  • 如何在 Rails 5 中设置资产管道以使用自定义字体?

    我必须使用自定义字体贾米尔 努里 纳斯塔莱克 http www urdujahan com urdu fonts Jameel 20Noori 20Nastaleeq zip在 Rails 5 应用程序中 我以前从未使用过 Rails 中的
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • 如何知道 .keyup() 是否是字符键(jQuery)

    如何知道 keyup 是否是字符键 jQuery input keyup function if key is a character such as a b A b c 5 3 2 etc not enter key or shift o
  • 如何从 html 页面 [javascript] 调用 Web 服务方法而不刷新页面

    我有一个webservice这将返回一个值 我的要求是 我需要调用它webservice从一个index html页面 该页面有一个 html 提交按钮 在该按钮上单击我正在呼叫JavaScript 从那里我想调用网络方法 我怎样才能做到这
  • HTML5 文件 API 和 AJAX 上传分块问题

    我编写了一个带有单独进度的拖放多个文件上传等 除了一件事之外 它工作得非常好 上传较大文件时 有时浏览器会锁定 直到上传完成 我认为这是因为该文件存储在浏览器的内存中并占用了浏览器可用的所有资源 我想知道 是否可以逐段读取文件并在读取时通过
  • 从字节数组设置 img src

    我需要设置img src我在对象中拥有的字节数组的属性 img
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 禁用复选框上的输入

    需要在取消选中该复选框时禁用输入 并在选中该复选框时启用它 我的代码是这样的 div class y div
  • javascript - 如何获取对象名称或关联数组索引名称?

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n
  • 触发 jQuery UI 滑块事件

    如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用 完整的示例脚本如下
  • Flexbox 项目的完美圆形边框半径[重复]

    这个问题在这里已经有答案了 我有类似这样的项目 它们是弹性盒容器内的弹性项目 我的正常尺寸物品 我的物品被挤压 我的 CSS 看起来像这样 body display flex flex direction column align item

随机推荐