近期因为某些原因，也许是因为刚接触JS比较好奇JS的用法，也许是因为看到其它大佬网站的弹窗心动了，于是我开始研究起了弹窗，但我是一个喜欢简单的人，面对各位大佬的顶级教程，我还是比较喜欢butterfly自带的，不为别的，只是因为它“简单”。

经过研究发现butterfly使用的是Snackbar弹窗，但是两者的调用方法又有所区别，一时也没搞懂butterfly的怎么调用，但是可以确定的是butterfly的弹窗只是在Snackbar的基础上修改了一下，于是经过多次失败还是不甘心，突发奇想，我可以直接调用原生的弹窗，然后用css改的和butterfly的一模一样就行了，于是就有了这篇文章。

文档

官方文档：https://www.polonel.com/snackbar/

以下内容仅供参考，具体请查阅官方文档。

弹窗位置

可选：top-left / top-center / top-right / bottom-left / bottom-center / bottom-right

翻译：左上/中上/右上/左下/中下/右下

1
Snackbar.show({pos: 'bottom-left'});

配置

Key Default 描述
text null 要在通知中拆分的文本。
textColor #FFFFFF 通知文本的文本颜色。默认值为白色。
pos bottom-left 通知将显示的位置。有关可能的位置，请参阅上面的示例。
customClass null 将自定义类添加到通知中以进行自定义样式设置。
width auto 通知的宽度。用于根据需要缩小/扩展窗口。
showAction true 布尔值来显示操作 buton 或不显示。
actionText Dismiss 要显示为操作按钮的文本。
actionTextAria Dismiss, Description for Screen Readers 屏幕阅读器的文本。
alertScreenReader false 确定屏幕阅读器是否会宣布弹窗消息。
actionTextColor #4CAF50 操作按钮的文本颜色。
backgroundColor #323232 通知窗口的背景色。
duration 5000 显示通知的时间（以毫秒为单位）。
onActionClick function(ele) 默认操作关闭通知。
onClose function(ele) 在通知已关闭时触发。

调用

主题弹窗的调用：

1
2
3
4
5
btf.snackbarShow('欢迎来到徐州市第六百七十二号老实人的小站！') 
或
if (GLOBAL_CONFIG.Snackbar) {
    btf.snackbarShow('ServiceWorker未激活')
}

snackbar的调用

  • 无操作：

    1
    Snackbar.show({ showAction: false, });

  • 操作文本

    1
    Snackbar.show({ actionText: 'Thanks!', });

  • 文本颜色

    1
    Snackbar.show({ actionTextColor: '#ff0000', });

  • 单击“回调”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Snackbar.show({
       text: 'I have a custom callback when action button is clicked.',
       width: '475px',
       onActionClick: function(element) {
           //Set opacity of element to 0 to close Snackbar
           $(element).css('opacity', 0);
           alert('Clicked Called!');
       }
    });

调用示例

1
Snackbar.show({ actionText: '关闭',text: '欢迎来到徐州市第六百七十二号老实人的小站！',backgroundColor: '#9c9',actionTextColor: '#ffffff',pos: 'bottom-center',duration: '5000' });

魔改

为了确保snackbar跟主题的一模一样，需要在自定义css里面写入以下内容：

关于颜色，如果比较随便的话可以忽略掉，调用的时候可以单独配置颜色，我只是想一模一样才写的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* 颜色设置 */
[data-theme=light] {
  --sianx_popup: #9c9;/* 白天 */
}
[data-theme=dark] {
  --sianx_popup: #343434;/* 夜间 */
}
.snackbar-pos {
border-radius: 5px !important;/* 弹窗圆角 */
}
.snackbar-container {
  background: var(--sianx_popup) !important;/* 弹窗颜色 */
}
/* 字体设置，没有自定义字体的可忽略，这边只是提醒一下 */
.snackbar-container {
  font-family: 'aqqxs', sans-serif !important; /* snackbar弹窗 */
}

实践

看到这里应该已经知道大概怎么调用了，那么我们开始实践操作一下。

这是我的一个主页欢迎的弹窗，写进JS文件里就可以在指定的链接弹出弹窗。

1
2
3
if(window.location.href == 'http://localhost:4000/'||window.location.href == 'https://sianx.com/'||window.location.href == 'https://www.sianx.com/'||window.location.href == 'https://blog.sianx.com/'){
    Snackbar.show({ actionText: '关闭',text: '欢迎来到徐州市第六百七十二号老实人的小站！',backgroundColor: '#9c9',actionTextColor: '#ffffff',pos: 'bottom-center',duration: '5000' });
  }