SweetAlert2模态窗的使用

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

SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框。

1. 模态窗的使用演示：

 

//提示信息
swal({
    title: '温馨提示',
    text: "您好这是一个基本的信息提示框",
    confirmButtonText: '确认',
    confirmButtonColor: 'Green',
});



//成功
swal({
    text: "信息已提交成功！",
    type: "success",
    confirmButtonText: '确认',
    confirmButtonColor: '#4cd964',
});



//错误提示
swal({
    text: "对不起信息删除失败",
    type: "error",
    confirmButtonText: '确认',
    confirmButtonColor: '#f27474',
});



//警告提示
swal({
    text: "您好，信息正在提交中",
    type: "warning",
    confirmButtonText: '确认',
    confirmButtonColor: '#f8bb86',
});



//普通信息
swal({
    text: "您好，信息正在提交中",
    type: "info",
    confirmButtonText: '确认',
    confirmButtonColor: '#3fc3ee',
});



//提问信息
swal({
    text: "您还没有关注我们？",
    type: "question",
    confirmButtonText: '确认',
    confirmButtonColor: '#c9dae1',
});



//带定时的自动关闭的
swal({
    title: "自动关闭",
    text: "将在三秒钟自动关闭该对话框？",
    showConfirmButton: false,
    timer: 3000
});



//自定义弹窗内容，和按钮
swal({
    title: '<h2 style="font-weight:bold;color:red">温馨提示</h2>',
    type: 'info',
    html: '<a href="http://www.baidu.com" style="color:green">自定义的html内容</a>',
    showCloseButton: true,
    showCancelButton: true,
    confirmButtonColor: 'gray',
    cancelButtonColor: '#3fc3ee',
    confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消',
    cancelButtonText: ' <i  class="mui-icon mui-icon-trash"></i>确认'
});



//带反馈的弹窗
swal({
    text: "您还没有关注我们，建议先关注?",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#f8bb86',
    cancelButtonColor: 'gray',
    cancelButtonText: '取消',
    reverseButtons: true, //控制按钮反转
    confirmButtonText: '立即关注',
}).then(function(isConfirm) {
    if(!isConfirm) {
        swal({
            text: "取消了！",
            type: "error",
            confirmButtonText: '确认',
            confirmButtonColor: '#f27474',
        })
    } else {
        swal({
            text: "已成功关注！",
            type: "success",
            confirmButtonText: '确认',
            confirmButtonColor: '#4cd964',
        })
    }
});



//图片弹窗
swal({
    title: '图片',
    text: '这是一个自定义的图片',
    imageUrl: 'imgurl',
    imageWidth: 280,
    imageHeight: 280,
    animation: true, //控制是否有动画
    confirmButtonText: '陌影真他妈帅',
    confirmButtonColor: '#4cd964',
});



//自定义背景的弹窗
swal({
    title: '<h3 style="color:white">这是一个自定义的背景弹出框</h3>',
    width: 600,
    padding: 100,
    background: '#fff url(http://img2.3lian.com/2014/f5/172/d/31.jpg)',
    showConfirmButton: false,
});



//带input提交的弹窗，带ajax提交缓冲效果
swal({
    title: '输入您的姓名',
    input: 'text',
    confirmButtonText: '提交',
    confirmButtonColor: '#4cd964',
    showLoaderOnConfirm: true, //加载按钮是否可见
    preConfirm: function() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve();
            }, 5000);
        });
    },
    allowOutsideClick: false //弹框外是否可点
}).then(function(res) {
    if(res) {
        //实际使用过程中将此处换成ajax代码即可
        swal({
            type: 'success',
            title: 'Ajax 请求完成',
            html: '您的邮箱是: ' + '<strong>' + res + '</strong>',
            confirmButtonText: '确定',
            confirmButtonColor: '#4cd964'
        });
    }
});



//带结果通知的input
swal({
    title: '请输入您的姓名',
    input: 'text',
    confirmButtonText: '确定',
    confirmButtonColor: '#4cd964',
    inputValidator: function(value) {
        return new Promise(function(resolve, reject) {
            if(value) {
                resolve();
            } else {
                reject('至少要输入一个值哦！');
            }
        });
    }
}).then(function(result) {
    if(result) {
        swal({
            title: '结果通知',
            text: '您的名字是: <strong>' + result + '</strong>',
            confirmButtonText: '确定',
            confirmButtonColor: '#4cd964'
        });
    }
});



//带结果通知的textarea
swal({
        input: 'textarea',
        confirmButtonText: '确定',
        confirmButtonColor: '#4cd964'
    }).then(function(result) {
        if(result) {
            swal({
                title: '结果通知',
                text: '您输入的是: <strong>' + result + '</strong>',
                confirmButtonText: '确定',
                confirmButtonColor: '#4cd964'
            });
        }
});



//带下拉框的弹窗
swal({
    title: '请选择您的姓名',
    input: 'select',
    inputOptions: {
        'xsc': '夏守成',
        'ylj': '杨林静',
        'William': 'William'
    },
    inputPlaceholder: '选择你的名字',
    showCancelButton: true,
    confirmButtonText: '确定',
    confirmButtonColor: '#4cd964',
    preConfirm: function() {
        return new Promise(function(resolve) {
            resolve(["杨林静"]);
        });
    }
}).then(function(result) {
    if(result) {
        swal({
            type: 'success',
            html: '你选择的是: <strong>' + result[0] + '</strong>',
            confirmButtonText: '确定',
            confirmButtonColor: '#4cd964'
        });
    }
});



//带有定位和消失的弹窗
Swal({
  position: 'top-end', //定位 左上角
  type: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
});

//自定义 第三方 css 的 弹框 (推荐使用 Animate.css )
Swal.fire({
  title: 'Custom animation with Animate.css',
  animation: false,
  customClass: 'animated tada'
});



//右上角通知类弹窗
Swal.fire({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    type: 'success',
    title: 'Signed in successfully'
});


//示例：
swal({
    'title':'Are you sure?',
    'text':'You will not be able to recover this imaginary file!',
    'type':'warning',                 //提示类型： success(成功)、error(错误)、warning(警告)、info(提示)、question(提问)
    'showCancelButton': true,         //控制是否显示按钮 true/false
    'showConfirmButton': true,        //控制是否显示按钮
    'confirmButtonText': "确定",       //按钮text
    'cancelButtonText': "取消",        //按钮text
    'confirmButtonColor': '#DD6B55',   //确认按钮颜色
    'html':content,                   //自定义弹窗内容，HTML里面传入自定义的HTML代码
    'animation': false,　　　　　　　　 // animation表示的是对话框显示时的动画。默认动画是pop（淡出），也可以指定slide-from-top（从上面滑入）和slide-from-bottom（从下面滑入）。如果设为false则没有动画。
    'focusCancel': true,              // 是否聚焦 取消按钮
    'reverseButtons': true,           // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
    'closeOnConfirm': false,
    'closeOnCancel': false,
    'position': 'top-end',            //控制模态框的位置
    'timer': 1000,                    //控制显示时间
    imageUrl: "images/thumbs-up.jpg"  //用于替换Title上方的图
});

 

 

 2. 模态框内的参数配置

配置参数

参数	默认	描述
title	null	模态对话框的标题。它可以在参数对象的title参数中设置，也可以在swal()方法的第一个参数设置。
text	null	模态对话框的内容。它可以在参数对象的text参数中设置，也可以在swal()方法的第二个参数设置。
html	null	对话框中的内容作为HTML标签。如果同时提供text和html参数，插件将会优先使用text参数。
type	null	对话框的情景类型。有5种内置的情景类型：warning，error，success，info和question。它可以在参数对象的type参数中设置，也可以在swal()方法的第三个参数设置。
customClass	null	模态对话框的自定义class类。
animation	true	如果设置为false，对话框将不会有动画效果。
allowOutsideClick	true	是否允许点击对话框外部来关闭对话框。
allowEscapeKey	true	是否允许按下Esc键来关闭对话框。
showConfirmButton	true	是否显示“Confirm（确认）”按钮。
showCancelButton	false	是否显示“Cancel（取消）”按钮。
confirmButtonText	"OK"	确认按钮上的文本。
cancelButtonText	"Cancel"	取消按钮上的文本。
confirmButtonColor	"#3085d6"	确认按钮的颜色。必须是HEX颜色值。
cancelButtonColor	"#ccc"	取消按钮的颜色。必须是HEX颜色值。
confirmButtonClass	null	确认按钮的自定义class类。
cancelButtonClass	null	取消按钮的自定义class类。
buttonsStyling	true	为按钮添加默认的swal2样式。如果你想使用自己的按钮样式，可以将该参数设置为false。
reverseButtons	false	如果你想反向显示按钮的位置，设置该参数为true。
showLoaderOnConfirm	false	设置为true时，按钮被禁用，并显示一个在加载的进度条。该参数用于AJAX请求的情况。
preConfirm	null	在确认之前执行的函数，返回一个Promise对象。
imageUrl	null	为模态对话框自定义图片。指向一幅图片的URL地址。
imageWidth	null	如果设置了imageUrl参数，可以为图片设置显示的宽度，单位像素。
imageHeight	null	如果设置了imageUrl参数，可以为图片设置显示的高度，单位像素。
imageClass	null	自定义的图片class类。
timer	null	自动关闭对话框的定时器，单位毫秒。
width	500	模态窗口的宽度，包括padding值（box-sizing: border-box）。
padding	20	模态窗口的padding内边距。
background	"#fff"	"#fff" 模态窗口的背景颜色。
input	null	表单input域的类型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。
inputPlaceholder	""	input域的占位符。
inputValue	""	input域的初始值。
inputOptions	{} 或 Promise	如果input的值是select或radio，你可以为它们提供选项。对象的key代表选项的值，value代表选项的文本值。
inputAutoTrim	true	是否自动清除返回字符串前后两端的空白。
inputValidator	null	是否对input域进行校验，返回Promise对象。
inputClass	null	自定义input域的class类。
position	center	控制弹窗的位置，(  top-end左上角  )

 

方法

方法	描述
swal.setDefaults({Object})	当你在使用SweetAlert2时有大量的自定义参数，可以通过swal.setDefaults({Object})方法来将它们设置为默认参数。
swal.resetDefaults()	重置设置的默认值。
swal.queue([Array])	提供一个数组形式的SweetAlert2参数，用于显示多个对话框。对话框将会一个接一个的出现。
swal.close()或 swal.closeModal()	以编程的方式关闭当前打开的SweetAlert2对话框。
swal.enableButtons()	确认和关闭按钮可用。
swal.disableButtons()	禁用确认和关闭按钮。
swal.enableLoading()或swal.showLoading()	禁用按钮并显示加载进度条。通常用于AJAX请求。
swal.disableLoading()或swal.hideLoading()	隐藏进度条并使按钮可用。
swal.clickConfirm()	以编程的方式点击确认按钮。
swal.clickCancel()	以编程的方式点击取消按钮。
swal.showValidationError(error)	显示表单校验错误信息。
swal.resetValidationError()	隐藏表单校验错误信息。
swal.enableInput()	使input域可用。
swal.disableInput()	禁用input域。

 

浏览器兼容

SweetAlert2可以工作在所有的现代浏览器中：

• IE: 10+（需要引入Promise文件）

• Microsoft Edge: 12+

• Safari: 4+

• Firefox: 4+

• Chrome 14+

• Opera: 15+