简介

SweetAlert是一款很好用的弹出框框架

下载

点我下载

导入

博主用的是bootstrap-sweetalert,所以要依赖bootstrap，导入前先导入原生jQuery以及bootstrap

    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <script src="/static/js/jquery-3.2.1.min.js"></script>

    <script src="/static/bootstrap/js/bootstrap.min.js"></script>

    <script src="/static/sweetalert/sweetalert.min.js"></script>

基本样式

1、单条弹出框

swal("这是一条消息！");

2、删除警告框（取消时不提示）

swal({

            title:'你确定删除吗？',

            text:'一旦删除，将无法恢复！',

            type:'warning',

            showCancelButton:true,

            confirmButtonColor:'#DD6B55',

            confirmButtonText:'确定删除！',

            closeOnConfirm:false

         },

         function(){

            swal("删除","您的文件已经删除","success");

         }

         );

3、删除警告框（取消时提示）

swal({

            title:'你确定删除吗？',

            text:'一旦删除，将无法恢复！',

            type:'warning',

            showCancelButton:true,

            confirmButtonColor:'#DD6B55',

            confirmButtonText:'确定删除！',

            cancelButtonText:'取消操作！',

            closeOnConfirm:false,

            closeOnCancel:false

        },

        function(isConfirm){

            if(isConfirm){

                swal("删除！","您的文件已经被删除！",'success');

            }else{

                swal('取消！',"您的文件是依然存在！",'error');

            }

        }

        )

4、带图片的弹出框

swal({

            title:'Sweet!',

            text:'送你一张图片',

            imageUrl:'static/img/headpic/logo.png
' }); });

5、可插入html代码的弹出框

swal({

            title:"<h1 style='font-size:16px'>此处可以插入html</h1>",

            text:'我是<span style="color:#F8BB86">文字内容</span>',

            html:true

        })

6、自动关闭的弹出框

swal({

            title:'自动关闭弹窗',

            text:'设置弹窗在2秒后关闭',

            timer:2000,

            showConfirmButton:false

        });

　　

7、带输入框的弹出框

swal({

            title:'获取输入框中的内容',

            text:'写入一些有趣的东西吧：',

            type:'input',

            showCancelButton:true,

            closeOnConfirm:false,

            confirmButtonText:'确定',

            cancelButtonText:'取消',

            animation:'slide-from-top',

            inputPlaceholder:'请输入一些内容'

        },

        function(inputValue){

           if(inputValue==false) return false;

           if(inputValue==''){

            swal.showInputError('你必须写入一些东西');

            return false;

           }

           swal('非常好','您输入的内容是：'+inputValue,'success');

        }

        );

8、可以提交AJAX请求的弹出框

swal({

        title:'ajax请求例子',

        text:'提交ajax请求',

        type:'info',

        showCancelButton:true,

        closeOnConfirm:false,

        showLoaderOnConfirm:true

    },

    function(){

        setTimeout(function(){

            swal("ajax请求完成");

        },2000);

       }

    );

代码示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <script src="/static/js/jquery-3.2.1.min.js"></script>

    <script src="/static/bootstrap/js/bootstrap.min.js"></script>

    <script src="/static/sweetalert/sweetalert.min.js"></script>

    <style>

    </style>

</head>

<body>

    <button id="btn01">点我弹出</button>

    <button id="btn02">点我弹出</button>

    <button id="btn03">点我弹出</button>

    <button id="btn04">点我弹出</button>

    <button id="btn05">点我弹出</button>

    <button id="btn06">点我弹出</button>

    <button id="btn07">点我弹出</button>

    <button id="btn08">点我弹出</button>

    <script>

     $("#btn01").click(function(){

         swal("这是一条消息！");

     });

     $("#btn02").click(function(){

         swal({

            title:'你确定删除吗？',

            text:'一旦删除，将无法恢复！',

            type:'warning',

            showCancelButton:true,

            confirmButtonColor:'#DD6B55',

            confirmButtonText:'确定删除！',

            closeOnConfirm:false

         },

         function(){

            swal("删除","您的文件已经删除","success");

         }

         );

     });

     $("#btn03").click(function(){

        swal({

            title:'你确定删除吗？',

            text:'一旦删除，将无法恢复！',

            type:'warning',

            showCancelButton:true,

            confirmButtonColor:'#DD6B55',

            confirmButtonText:'确定删除！',

            cancelButtonText:'取消操作！',

            closeOnConfirm:false,

            closeOnCancel:false

        },

        function(isConfirm){

            if(isConfirm){

                swal("删除！","您的文件已经被删除！",'success');

            }else{

                swal('取消！',"您的文件是依然存在！",'error');

            }

        }

        )

     });

      $("#btn04").click(function(){

        swal({

            title:'Sweet!',

            text:'送你一张图片',

            imageUrl:'node_modules/sweetalert/example/images/thumbs-up.jpg'

        });

         });

      $("#btn05").click(function(){

        swal({

            title:"<h1 style='font-size:16px'>此处可以插入html</h1>",

            text:'我是<span style="color:#F8BB86">文字内容</span>',

            html:true

        })

      });

      $("#btn06").click(function(){

        swal({

            title:'自动关闭弹窗',

            text:'设置弹窗在2秒后关闭',

            timer:2000,

            showConfirmButton:false

        });

      });

      $("#btn07").click(function(){

        swal({

            title:'获取输入框中的内容',

            text:'写入一些有趣的东西吧：',

            type:'input',

            showCancelButton:true,

            closeOnConfirm:false,

            confirmButtonText:'确定',

            cancelButtonText:'取消',

            animation:'slide-from-top',

            inputPlaceholder:'请输入一些内容'

        },

        function(inputValue){

           if(inputValue==false) return false;

           if(inputValue==''){

            swal.showInputError('你必须写入一些东西');

            return false;

           }

           swal('非常好','您输入的内容是：'+inputValue,'success');

        }

        );

      });

      $("#btn08").click(function(){

        swal({

        title:'ajax请求例子',

        text:'提交ajax请求',

        type:'info',

        showCancelButton:true,

        closeOnConfirm:false,

        showLoaderOnConfirm:true

    },

    function(){

        setTimeout(function(){

            swal("ajax请求完成");

        },2000);

       }

    );

      });

    </script>

</body>

</html>

　　

　　我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan

 
 
 

前端基础(九)：SweetAlert(弹出框)的更多相关文章

  1. 自动化测试基础篇--Selenium弹出框alert

    摘自https://www.cnblogs.com/sanzangTst/p/7685304.html   不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认 ...

  2. js基础 三种弹出框 数据类型

    总结:js三个组成部分ES:语法DOM:对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互BOM:对象模型 => 通过js代码与浏览器自带功能进行交互 引入 ...

  3. Selenium基础知识(七)弹出框处理

    使用switch_to.alert方法来处理弹页面弹出的警告框 页面常见警告框种类:alert/confirm 确认框/prompt switch_to.alert().accept() switch ...

  4. SweetAlert弹出框

    以前也用过,那个时候没有写过,突然看见了,就写上了. 网址:http://mishengqiang.com/sweetalert2/ swal({ title: '确定删除吗?', text: '你将 ...

  5. ajax结合sweetalert弹出框删除数据

    思路:

  6. jsp + js + 前端弹出框

    在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...

  7. 弹出框三 之 sweetalert

    1下载sweetalert 2.引入到项目中 <link href="~/Content/sweetalert.css" rel="stylesheet" ...

  8. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  9. Python+Selenium笔记（九）：操作警告和弹出框

    #之前发的 driver.switch_to_alert() 这句虽然可以运行通过,但是会弹出警告信息(这种写法3.x不建议使用)  改成 driver.switch_to.alert就不会了. (一 ...

随机推荐

  1. mvn安装

    先安装jdk.jre,maven需要jdk.jre支持 1.安装 jdk 卸载自带jdk rpm -qa | grep jdk rpm -e --nodeps 下载 JDK JDK 下载地址:http ...

  2. 用JavaScript来实现单例模式

    首先,了解一下什么是单例模式,这里我直接把菜鸟教程中的定义给copy过来: 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供 ...

  3. 【文章存档】Local Git 如何部署分支

    又来存档文章了,链接 https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-servi ...

  4. 【ARM-Linux开发】arm-none-Linux-gnueabi-gcc下载安装

    arm-none-Linux-gnueabi-gcc是 Codesourcery 公司(目前已经被Mentor收购)基于GCC推出的的ARM交叉编译工具.可用于交叉编译ARM系统中所有环节的代码,包括 ...

  5. 【VS开发】文件共享内存2

    在32位的Windows系统中,每一个进程都有权访问他自己的4GB(232=4294967296)平面地址空间,没有段,没有选择符,没有near和far指针,没有near和far函数调用,也没有内存模 ...

  6. 带你手写基于 Spring 的可插拔式 RPC 框架（五）注册中心

    注册中心代码使用 zookeeper 实现,我们通过图片来看看我们注册中心的架构. 首先说明, zookeeper 的实现思路和代码是参考架构探险这本书上的,另外在 github 和我前面配置文件中的 ...

  7. python 创建目录文件夹

    主要涉及到三个函数 1.os.path.exists(path) 判断一个目录是否存在 2.os.makedirs(path) 多层创建目录 3.os.mkdir(path) 创建目录 DEMO 直接 ...

  8. HBuilder git使用教程

    1.插件安装 打开HBuilder,工具->插件安装. 等待安装,成功后提示重启后生效,立即重启. 2.在码云上新建一个项目,复制项目地址. 码云地址:https://gitee.com/ 3. ...

  9. 使用pycharm开发web——django2.1.5（五）表单和通用视图

    看了刘江老师教程这么多天,卧槽,我才发现他也曾跻身于行伍之间,interesting 刘老师这波讲解很到位,告诉你如何编写单例视图的时候忽然告诉你,其实不用这么麻烦,我们有通用视图,那些总是要做相似的 ...

  10. （十五）mybatis 逆向工程

    目录 为什么需要逆向工程 使用方法 如何读懂生成的代码 总结 为什么需要逆向工程 对于数据库中的那么多的表 ,基本的 CRUD 操作 ,以及 mybatis 需要使用的 接口.mapper ,这些工作 ...