码迷,mamicode.com
首页 > 其他好文 > 详细

33、Flask实战第33天:sweetalert提示框

时间:2018-08-07 23:59:12      阅读:1711      评论:0      收藏:0      [点我收藏+]

标签:不能   sheet   call   ext   处理   ESS   mcal   ack   click   

这节我们继续优化,接收到返回值,我们在前端做一些处理,如:密码修改成功,弹出一个成功的提示框。这个提示框我们采用sweetalert

技术分享图片

其中xtalert.js是对上面两个文件的一个封装,使得我们用sweetalert变得更简单,需要素材的同学点击右侧的二维码打赏10元,截图发送到邮箱463951510@qq.com吧,之前打赏过本论坛实战的就不用再打赏了哈!

技术分享图片
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="sweetalert/sweetalert.css">
        <script src="sweetalert/sweetalert.min.js"></script>
        <script src="sweetalert/xtalert.js"></script>
        <style>
            button{
                display: block;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <button onclick="xtalert.alertError(‘不能删除文章!‘)">错误提示</button>
        <button onclick="xtalert.alertInfo(‘您没有权限,请联系管理员!‘)">信息提示</button>
        <button onclick="xtalert.alertSuccess(‘恭喜您!操作成功!‘)">成功提示</button>
        <button id=‘confirm-btn‘>确认提示</button>
        <script>
            var confirmBtn = document.getElementById(confirm-btn);
            confirmBtn.onclick = function(event){
                xtalert.alertConfirm({
                    msg: 恭喜!文章发表成功!是否再发一篇?,
                    confirmText: 再发一篇,
                    cancelText: 回到首页,
                    confirmCallback: function(){
                        alert(点击了确认按钮);
                    },
                    cancelCallback: function(){
                        alert(点击了取消按钮);
                    }
                });
            }
        </script>
        <button id=‘input-btn‘>输入框提示</button>
        <script>
            var inputBtn = document.getElementById(input-btn);
            inputBtn.onclick = function(event){
                xtalert.alertOneInput({
                    text: 请输入板块名称,
                    confirmCallback: function(text){
                        alert(text);
                        xtalert.close();
                    }
                });
            }
        </script>
        <button onclick="xtalert.alertNetworkError()">网络错误</button>
        <button onclick="xtalert.alertInfoToast(‘权限受限,请联系管理员!‘)">信息toast</button>
        <button onclick="xtalert.alertErrorToast(‘权限受限,请联系管理员!‘)">错误toast</button>
        <button onclick="xtalert.alertSuccessToast(‘恭喜!操作成功!‘)">成功toast</button>

    </body>
</html>
sweetalert提示框使用demo

 

33、Flask实战第33天:sweetalert提示框

标签:不能   sheet   call   ext   处理   ESS   mcal   ack   click   

原文地址:https://www.cnblogs.com/sellsa/p/9440109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!