lycorisradiata

SweetAlert--好看的弹窗插件
SweetAlert是一个漂亮的、响应式的、可定制的和可访问的弹窗,可以替代Javascript原生的alert和...
扫描右侧二维码阅读全文
10
2018/12

SweetAlert--好看的弹窗插件

SweetAlert是一个漂亮的、响应式的、可定制的和可访问的弹窗,可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框。
支持自定义标题、提示类型(成功,失败,警告...)、展示图片、自定义动画(animate.css)、Ajax 请求等等。

使用方法:我们必须将SweetAlert插件的js文件和css文件引入到页面中。

   <script src="sweetalert.min.js"></script> 
   <link rel="stylesheet" href="sweetalert.css"> 

基本信息弹窗:

 $("button").click(function(){ 
    swal("这是一条信息!"); 
 });

如图所示:
027.png

警告信息弹窗,“确认”按钮带有一个函数……

     $(function(){
         $("button").click(function(){ 
            swal({ 
              title: '确定删除吗?', 
              text: '你将无法恢复它!', 
              type: 'warning',
              showCancelButton: true, 
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: '确定删除!', 
            }).then(function(){
              swal(
                '删除!',
                '你的文件已经被删除。',
                'success'
                );
            })
        })
     })

如图所示:
10010.png

官方文档

Last modification:December 11th, 2018 at 02:43 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment