近期因为某些原因,也许是因为刚接触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'});

配置

KeyDefault描述
textnull要在通知中拆分的文本。
textColor#FFFFFF通知文本的文本颜色。默认值为白色。
posbottom-left通知将显示的位置。有关可能的位置,请参阅上面的示例。
customClassnull将自定义类添加到通知中以进行自定义样式设置。
widthauto通知的宽度。用于根据需要缩小/扩展窗口。
showActiontrue布尔值来显示操作 buton 或不显示。
actionTextDismiss要显示为操作按钮的文本。
actionTextAriaDismiss, Description for Screen Readers屏幕阅读器的文本。
alertScreenReaderfalse确定屏幕阅读器是否会宣布弹窗消息。
actionTextColor#4CAF50操作按钮的文本颜色。
backgroundColor#323232通知窗口的背景色。
duration5000显示通知的时间(以毫秒为单位)。
onActionClickfunction(ele)默认操作关闭通知。
onClosefunction(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
/* 颜色设置 */
[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' });
}