SweetAlert2

SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。

中文文档地址: https://sweetalert.bootcss.com/

  • 安装

通过 bower 或者npm安装

bower install sweetalert2
npm install sweetalert2
  • 引入
    <link th:href="@{https://www.huangwx.cn/css/sweetalert.css}" rel="stylesheet">
    <script th:src="@{https://www.huangwx.cn/js/sweetalert-dev.js}" ></script>
  • Demo

swal('Hello world!');

swal('Oops...', 'Something went wrong!', 'error');

  • 放一个我刚写的实例吧
<script th:inline="javascript">
    $(function () {

        var phone = [[${result.data.phone}]];

        if(phone == null) {

            swal({
                title: "账号绑定",
                text: "请先绑定您的手机号码",
                type: "input",
                showCancelButton: true,
                closeOnConfirm: false,
                animation: "slide-from-top",
                inputPlaceholder: "Write something"
            },
                function(inputValue){
                if (inputValue === false)
                    return false;
                if(!(/^1[3456789]\d{9}$/.test(inputValue))){
                    swal.showInputError("这玩意不是手机号吧!");
                        return false;
                }
                    if (inputValue === "") {
                    swal.showInputError("兄弟,总得写点什么吧");
                    return false;
                }
                    $.ajax({
                        url:'/check/sms/' + inputValue,
                        type:'get',
                        dataType:'json',
                        success:function(Result){
                            if(Result.flag == true){
                                swal("Nice!", "短信验证码已经发送至您的手机:" + inputValue, "success");
                                swal({
                                    title: "号码验证",
                                    text: "请输入4位验证码",
                                    type: "input",
                                    showCancelButton: true,
                                    closeOnConfirm: false,
                                    animation: "slide-from-top",
                                    inputPlaceholder: "Write something"
                                },function(inputValue){
                                    var reg = /^\d{4}$/;

                                    if(!reg.test(inputValue)){
                                        swal.showInputError("验证码是四位的!");
                                        return false;
                                    }
                                    if (inputValue === "") {
                                        swal.showInputError("兄弟,总得写点什么吧");
                                        return false;
                                    }
                                    $.ajax({
                                        url:'/check/smscheck/phone',
                                        dataType:'json',
                                        type:"get",
                                        data:{
                                            "phone":Result.data,
                                            "phonecode":inputValue
                                        },
                                        headers:{
                                            'Authrorization': window.localStorage.getItem("Authrorization")//将token放到请求头中
                                        },
                                        success:function(res){
                                            if(res.flag == true){
                                                swal("NICE!", "手机绑定成功!", "success");
                                            }else{
                                                swal("ERROR", "手机绑定失败!", "error");
                                            }
                                        }

                                    })


                                });



                            }else {
                                return false;
                            }
                        }

                    })
            });

        }
    })
</script>
  • 视图效果

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注