前端弹框总结

nunumaymax

已于 2022-03-01 09:32:34 修改

阅读量991

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery

于 2021-08-23 16:10:45 首次发布

本文链接：https://blog.csdn.net/qq_38374286/article/details/119871373

本文介绍了如何在PC和移动端应用中使用Toast组件进行消息提示。详细阐述了Toast的引入、使用方法，包括不同动画效果、位置设定和关闭选项等，并展示了在不同场景下的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹框

- Toast

我们日常开发中，会经常使用到各种弹框，所以这篇文章就是对使用过的弹框组件的进行一个汇总。

Toast

引入

<link type="text/css" rel="stylesheet" href="css/jquery.toast.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.toast.js"></script>

使用

$.toast({
            text: '请稍后重试！',
            heading: '消息提示',
            //icon: 'success',//消息提示框的图标样式。可取值：success，info，error，warning。
            showHideTransition: 'fade',//消息提示框的动画效果。可取值：plain，fade，slide。
            allowToastClose: false,//是否显示关闭按钮。(true 显示，false 不显示)
            hideAfter: 5000,//设置为false则消息提示框不自动关闭.设置为一个数值则在指定的毫秒之后自动关闭消息提框
            stack: 1,//消息栈。同时允许的提示框数量
            position: 'mid-center',//消息提示框的位置：bottom-left, bottom-right,bottom-center,top-left,top-right,top-center,mid-center
            //textAlign: 'left',//文本对齐：left, right, center。
            loader: false,//是否显示加载条
            bgColor: '#aaa',//背景颜色
            textColor: '#eee',//文字颜色
            //loaderBg: '#ffffff',//加载条的背景颜色

            /*
            * beforeShow 会在toast即将出现之前触发
            * afterShown 会在toast出现后触发
            * beforeHide 会在toast藏起来之前触发
            * afterHidden 会在toast藏起来后被触发
            * */
            beforeShow: function(){
                alert('The toast is about to appear');
            },

            afterShown: function () {
                alert('Toast has appeared.');
            },

            beforeHide: function () {
                alert('Toast is about to hide.');
            },

            afterHidden: function () {
                alert('Toast has been hidden.');
            }
        });