简介

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. Canal——写入到ES中数据错乱

    问题描述 使用canal-adapter写入elasticSearch数据时,数据是写入了elasticSearch了,但出现了mysql表中的数据和elasticSearch中索引中的数据错乱的问题 ...

  2. Delphi10.2安装过程详解

    下载好的Delphi10.2是iso镜像,使用虚拟光驱,快速装载后,提示安装   运行setup.exe安装程序,选择安装语言——点击OK,最好关闭网络和退出其他软件   勾选同意条款,点击next ...

  3. Spring Cloud(6)：保护微服务（Security） - OAuth2.0

    OAuth2是一个授权(Authorization)协议.我们要和Spring Security的认证(Authentication)区别开来,认证(Authentication)证明的你是不是这个人 ...

  4. unity读取灰度图生成三维地形mesh

    准备灰度图 IGray.png及草地贴图 IGrass.jpg ,放入Assets下StreamingAssets文件夹中.     创建空材质,用作参数传入脚本.   脚本如下,挂载并传入材质球即可 ...

  5. WordPress的默认循环

    WordPress的默认循环是相对我们上一篇的WordPress自定义循环而言的,默认循环是根据链接结构的来查询数据的. 我们知道WordPress模板文件就是根据文件名来找寻模板的,这里的链接结构也 ...

  6. 39.创建多进程及进程通讯 -- Queue--Pipe--Event

    创建多进程 windows:进程.线程 linux:进程.线程(做了进程通信的多进程实现的线程) 进程之间内存彼此独立,不管是父子进程还是单个独立进程 multiprocessing:Process ...

  7. 创建多个Fragment可滑动界面

    创建新项目,选择Tabbed Activity 默认就有2个Fragment,这里我们删除相关代码. 在切换时 FragmentPagerAdapter onDestroyView onCreateV ...

  8. vue加载优化方案

    我们的项目随着组件的加入,首次加载的js文件越来越大,用户等待时间越来越长:之前想着使用webpack的splitCoding来解决,看了webpack的官方文档可以配置optimization的 m ...

  9. 《MIT 6.828 Lab 1 Exercise 7》实验报告

    本实验链接:mit 6.828 lab1 Exercise 7. 题目 Exercise 7. Use QEMU and GDB to trace into the JOS kernel and st ...

  10. 《你必须知道的495个C语言问题》读书笔记之第1-2章：声明和初始化

    1. C标准中并没有精确定义数值类型的大小,但作了以下约束: (1) char类型可以存放小于等于127的值: (2) short int和int可以存放小于等于32767的值: (3) long i ...