notif是一个超轻的jQuery通知插件，用于在网页顶部显示带有自定义动作按钮的固定通知栏。

非常适合产品提示栏、cookie通知栏、信息消息栏等。

基于CSS flexbox的完全响应。平滑的打开/关闭动画基于CSS3变换和过渡。

如何使用它:

1.该插件需要最新的jQuery JavaScript库才能工作。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

2.在HTML文档中下载并加载jQuery-notif插件的文件。

<link rel="stylesheet" href="notif.css">
<script src="notif.js"></script>

3.在页面上显示基本通知栏的JavaScript。

notif('This is a text message!')

4.在通知栏中插入一个自定义操作按钮。

notif('A jQuery Notification Plugin', 'jQueryScript', 'https://jqueryscript.net')"

5.通过覆盖以下CSS样式来自定义通知栏。

div.notif{
  display: flex;
  position: fixed;
  top: -100px;
  left: 0;
  padding: 10px 60px;
  width: 100vw;
  min-height: 64px;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  align-items: center; 
  -webkit-align-items: center;
  -moz-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  font-size: .9rem;
  color: white;
  background-color: #0076A0;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  z-index: 4;
}

div.notif .button{
  display: block;
  margin: 0 30px;
  padding: 10px 20px;
  font-size: inherit;
  font-family: inherit;
  background: none;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  cursor: pointer;
}

更新日志：

2022-09-05

• JS和CSS更新

预览截图

超小型粘性通知栏插件 jQuery notif