显示弹窗通知

• 控制是否显示弹窗通知；
• 当前支持侧边通知、凝滞通知、自定义：

  • 侧边通知：支持左上、左中、左下、右上、右中、右下，共计6个位置的任意位置显示；

  • 

  • 凝滞通知：在全屏中心处显示通知，直到点击按钮后才会消失；

  • 

通知标题

• 留空时隐藏；
• 设置通知的标题信息；

通知的内容，支持html

• 必填项，支持html；
• 通知内容发生变更时会重新触发通知显示。

通知按钮内容

• 留空时隐藏；
• 关闭按钮显示的文本内容；
• 隐藏后必须在通知内容中设置属性onclick="closePopupNotice();"关闭通知。
• 示例：

这是一个通知，点击<span onclick="closePopupNotice();">关闭</span>

通知显示模式

• 首次显示：仅首次访问时弹出通知；
• 会话级关闭：用户关闭后当前窗口不再显示；
• 永久关闭：用户关闭后不再显示该通知。

通知显示时间

• 未填写或<= 0时，不显示定时关闭；
• 单位：秒
• 通知将在设定的时间内自动关闭，可配合隐藏通知按钮来达到只能自动关闭的情形。

侧边通知弹出方向-水平方向

• 启用侧边通知时显示此配置项；
• 控制侧边通知的弹出方向-水平方向。
  • 右侧
  • 左侧

侧边通知弹出方向-垂直方向

• 启用侧边通知时显示此配置项；
• 控制侧边通知的弹出方向-垂直方向。
  • 顶部
  • 居中
  • 底部

自定义通知

需要具有一定前端开发知识

注册事件

<script>
  // 监听通知显示事件
  window.addEventListener('onNoticeShow', function() {
    //todo 显示通知逻辑
  });

  // 监听通知关闭事件
  window.addEventListener('onNoticeHide', function() {
    //todo 关闭通知逻辑
    ...
    // 移除所有通知资源（需最后执行）
    // 若使用定时器延迟执行，请将此方法放在延迟方法的最后位置
    document.querySelector('.popup-notice').remove()
  });

</script>

样式

<style>
  .popup-notice {
    z-index: 10000;
  }

  @media (max-width: 768px) {
      .popup-notice {
          
      }
  }
</style>

• 弹窗通知根类规范
  • 1. popup-notice 作为样式根容器；
  • 2. 所有子元素样式必须嵌套在该类下，避免编写独立样式以防止污染全局样式。
• z-index: 10000;确保显示在最上层；
• 使用@media (max-width: 768px)处理移动端的样式。

其他函数

关闭通知

<button class="notice-close-btn" onclick="closePopupNotice();">
                我知道了
            </button>

• onclick="closePopupNotice();"方法用于关闭通知，同时触发onNoticeHide事件。

网站页面滑动控制

//阻止网页滑动
document.body.classList.add('body-no-scroll')

//允许网页滑动
document.body.classList.remove('body-no-scroll')

• 为body添加类body-no-scroll，阻止网页滑动；
• 为body移除类body-no-scroll，允许网页滑动；

使用自定义通知模拟侧边栏通知示例

<div class="notice-content right top">
        <div class="content-title">
            <span>这是一个自定义通知</span>
        </div>
        <div class="others">这是一个自定义通知</div>
        <div class="others-end">
            <button class="notice-close-btn" onclick="closePopupNotice();">
                我知道了
            </button>
        </div>
    </div>

<style>
 .popup-notice .notice-content{position:fixed;width:350px;height:auto;max-height:400px;border-radius:var(--radius-wrap);background-color:var(--background);-webkit-box-shadow:-2px 0 10px rgba(0,0,0,.1);box-shadow:-2px 0 10px rgba(0,0,0,.1);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:10000}.popup-notice .notice-content.left{left:-400px!important;-webkit-transition:left .3s ease-out!important;transition:left .3s ease-out!important}.popup-notice .notice-content.left.show{left:10px!important}.popup-notice .notice-content.right{right:-400px!important;-webkit-transition:right .3s ease-out!important;transition:right .3s ease-out!important}.popup-notice .notice-content.right.show{right:10px!important}.popup-notice .notice-content.top{top:60px}.popup-notice .notice-content.center{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.popup-notice .notice-content.bottom{bottom:2rem}.popup-notice .countdown{padding:.5rem;text-align:center;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;font-weight:unset;color:var(--main);border-top:1px solid var(--light-x)}.popup-notice .countdown.padding{padding:1rem!important}.popup-notice .countdown #countdown{color:var(--theme);font-weight:700}.popup-notice .countdown i{color:#ff9800;font-size:1.15rem}@media (max-width:768px){.popup-notice .notice-content{width:80%!important;max-width:350px!important}}.popup-notice .content-title{padding:15px 20px;background-color:var(--theme);color:#f8f8f8;font-size:1.2rem;font-weight:700;border-radius:var(--radius-wrap) var(--radius-wrap) 0 0;text-align:center}.popup-notice .others{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:20px;font-size:1rem;overflow-y:auto;line-height:1.3em;text-align:center;color:var(--main)}.popup-notice .others-end{padding:15px 20px;text-align:center;border-top:1px solid var(--light-x)}.popup-notice .others-end button{padding:8px 25px;background-color:var(--theme);color:#f8f8f8;border:0;border-radius:16px;cursor:pointer;font-size:1rem;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-box-shadow:0 4px 15px rgba(var(--theme),.2);box-shadow:0 4px 15px rgba(var(--theme),.2)}.popup-notice .others-end button:hover{background-color:var(--theme);-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 6px 20px rgba(var(--theme),.3);box-shadow:0 6px 20px rgba(var(--theme),.3)}
</style>

<script>
    // 通知显示事件
    window.addEventListener('onNoticeShow', function() {
          setTimeout(function () {
            document.querySelector('.notice-content').classList.add('show')
          }, 0)
    });

    // 通知关闭事件
    window.addEventListener('onNoticeHide', function() {
        var popup = document.querySelector('.notice-content')
        popup.classList.remove('show')
        setTimeout(function () {
          document.querySelector('.popup-notice').remove()
        }, 300)
    });

</script>