Toast 即时小窗

Sweetalert2的Toast小窗 PLUGIN

Sweetalert2是比较优秀的弹窗插件，其包含了基本的Toast小窗，更多用法见：Sweetalert2。

基本使用方法如下：

定时关闭Toast 手动关闭Toast

<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
<script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function () {
                $("#satoast01").click(function () {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: '操作成功！',
                showCloseButton:false,
                text: '支付信息将通过短信发送给您，注意查收！',
                timer: 3000,
                timerProgressBar: true,
                onOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
        });
        });
        $("#satoast02").click(function () {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: '操作成功！',
                text: '支付信息将通过短信发送给您，注意查收！',
            });
        });
});
</script>

                                <a href="###" class="ax-btn ax-primary" id="satoast01">定时关闭Toast</a>
                                <a href="###" class="ax-btn ax-primary" id="satoast02">手动关闭Toast</a>

其他常用位置 PLUGIN

position的可选参数有：'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', 和 'bottom-end'。以下举例演示其他常用位置。

top center center-end

<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
<script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function () {
        $("#top").click(function () {
            Swal.fire({
                toast: true,
                position: 'top',
                icon: 'success',
                title: '操作成功！',
                showCloseButton:false,
                text: '支付信息将通过短信发送给您，注意查收！',
                timer: 3000,
                timerProgressBar: true,
                onOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
        });
        });
        $("#center").click(function () {
            Swal.fire({
                toast: true,
                position: 'center',
                icon: 'success',
                title: '操作成功！',
                showCloseButton:false,
                text: '支付信息将通过短信发送给您，注意查收！',
                timer: 3000,
                timerProgressBar: true,
                onOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
        });
        });
        $("#bottom-end").click(function () {
            Swal.fire({
                toast: true,
                position: 'bottom-end',
                icon: 'success',
                title: '操作成功！',
                showCloseButton:false,
                text: '支付信息将通过短信发送给您，注意查收！',
                timer: 3000,
                timerProgressBar: true,
                onOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
        });
        });
});
</script>

                                <a href="###" class="ax-btn ax-primary" id="top">top</a>
                                <a href="###" class="ax-btn ax-primary" id="center">center</a>
                                <a href="###" class="ax-btn ax-primary" id="bottom-end">center-end</a>