Toast 即时小窗

Sweetalert2的Toast小窗 PLUGIN

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

基本使用方法如下:

  • <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
    <script src="https://src.axui.cn/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'。以下举例演示其他常用位置。

  • <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
    <script src="https://src.axui.cn/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>