sweetalert

sweetalert目前主要有sweetalertsweetalert2两个版本。javascript

用户能够去对应的网站下载不一样的版本。将对应版本的js和css文件引入到HTML页面中。如:css

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

后,方可以使用。html

    SweetAlert2:A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.java

         一.函数方式git

         例子:github

        eg01:弹出基本的提示,npm

swal('Hello world');

        eg02:弹出错误提示,编程

swal('title', 'Something went wrong!', 'error');

   swal()里面能够放三个参数,第一参数是弹窗标题,第二个参数是弹窗内容,第三个参数是弹窗的类型(弹窗类型不一样,弹窗的图标不一样)。这里 swal 中的第三个参数‘error’,指定了弹框的类型types,还能够改为‘success’/‘warning’/‘info’/‘question’,下图是不一样types的弹窗的图标:ide

          二.对象方式函数

         eg3:处理弹出框的处理结果,swal({....}).then(function(){...},function(dismiss){...})。点击确认按钮事后,系统会默认执行第一个function()。dismiss的意思是关掉对话框,关掉对话框执行第二个function(dismiss)。

swal({
	title: '你肯定吗?',//标题
	text: '你将不能够恢复被删除的文件',//内容
	type: 'warning',//弹窗类型
	showCancelButton: true,//是否显示删除按钮,默认值是false(不显示),true(显示)
	confirmButtonText: '确认删除',//确认按钮上的字
	cancelButtonText: '取消',//取消按钮上面的字
}).then(function() {
	swal(
		'删除成功!',
		'你的文件被删除',
		'success',
	)
}, function(dismiss) {
	// dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
	if (dismiss === 'cancel') {
		swal(
			'取消操做',
			'你取消了该操做',
			'error'
		)
	}
})

      (插入gif动态图片)

        处理关闭对话框事件:当一个弹窗被用户关闭时,关闭弹窗的方式会被dismiss记录,数据类型是string类型:

string  描述 相关的配置项
'overlay' 用户点击overlay(弹窗以外的窗体部分) allowOutsideClick
'cancel' 用户点击cancel按钮 showCancelButton
'close' 用户点击close按钮 showCloseButton
'esc' 用户按Esc键 allowEscapeKey
'timer' 倒计时结束而且弹窗自动被关闭 timer(计时器)

        若是未处理dismiss的事件,控制台将报错(弹窗正常弹出/关闭)。为了不这种状况,一般会添加处理函数function(dismiss){ }或者使用 .catch(swal.noop)作简单快速处理错误的方式。

        sweetalert的配置项

sweetalert2的相关配置项

argument(参数) 默认值 描述
title null modal的title,可使用HTML标签,它能够放在函数的第一个参数中也能够添加到对象中的“title”
ttileText null 纯文本的title
text null   modal的描述。它能够放在函数的第二个参数中也能够添加到对象中的“text”
html  null modal的HTML描述。若是同时提供了text和html参数,“text”将被使用
type null modal的类型。Sweetalert2由五个内置类型 warning、info、success、error、question,各自有各自的动画效果。它能够放在函数的第三个参数中也能够添加到对象的“type”
target ‘body’ 用于添加modal框的容器元素
input null 输入字段类型,分为text、email、password、number、tel、range、textarea、select、radio、checkbox、file和url
width 500px modal窗口宽度,包括内边距(box-sizing:border-box)。能够px或者%形式。
padding 20 modal窗口的内边距
background #fff modal框窗口的背景(css的背景属性)
customClass null modal框的custom CSS类
timer null modal框的自动关闭计时器。表示的是毫秒
animation true 动画效果。若是设置为false,modal框的CSS动画效果将失效。
allowOutSideClick true 点击模态框之外的地方是否关闭模态框。true(默认)关闭、false不关闭
allowEscapeKey true 按Esc键是否关闭模态框。true(默认)关闭、false不关闭
allowEnterKey true

默认为true,按空格键或者回车键表示确认,当设为false时,只能按“确认按钮“来确认。

showConfirmButton true 设置为false时,“confirm”按钮不会被显示。当使用html参数时可能会有用的。
showCancelButton false 设置为true时,“cancel”按钮将被显示,用户能够点击该按钮关闭模态框
confirmButtonText “OK” 用来改变confirm按钮的文字
cancelButtonText “cancel” 用来改变cancel按钮上的文字
confirmButtonColor “#3085d6” 确认按钮的背景色(必须是十六进制)
cancelButtonColor “#aaa” 删除按钮的背景色(必须是十六进制)
confirmButtonClass null A custom CSS class for the "Confirm"-button.
canceButtonClass null A custom CSS class for the "Cancel"-button.
confirmButtonAriaLabel ' ' Use this to change the aria-label for the "Confirm"-button.
canceButtonAriaLabel ' ' Use this to change the aria-label for the "Cancel"-button.
buttonsStyling true 将默认样式应用于按钮,若是你想用本身的样式类(如 Bootstrap样式类),将该参数值设为false
reverseButtons false 若是要反转默认按钮位置(“确认” 按钮在右侧),请设置为true
focusConfirm true 若是要按标签顺序对第一个元素进行聚焦,而不是默认状况下将“确认”按钮设置为false。
focusCancel false 若是要在默认状况下对“取消”按钮进行聚焦,请设置为true。
showCloseButton false 若是想在右上角显示close按钮,设置成true
closeButtonArialLabel "Close this dialog" Use this to change the aria-label for the close button.
showLoaderOnConfirm false 设置为true可禁用按钮,并显示正在加载的内容。 将其与preConfirm参数结合使用。
preConfirm  null 确认以前执行的功能,应返回Promise,请参阅使用示例。
imageUrl null 为模态框添加图像。 应该包含一个带有图像路径或URL的字符串。
imageWidth null 若是设置了imageUrl,您能够指定imageWidth,单位px
imageHeight null  
imageAlt ‘ ’ 自定义图片的代替字(图片不显示时显示该字)
imageClass null 图片的自定义CSS类
inputPlaceholder ‘ ’ input框中的预显示自断
inputValue ‘ ’ input框中的初始值
inputOptions { } or Promise input参数被设置为select(多选)or radio(单选),能够提供选择项。对象键值对中的key表示选项值,对象键值对中的values表示选项文本值
inputAutoTrim true 自动将input值的字符串两端的空格删除
inputAttributes { } HTML input属性(如:min,max,autocomplete,accept ),这些被加入input框,对象key表示属性名,对象values表示属性值
inputValidator null input框的校验,should return Promise, see usage example.
inputClass null 为input框自定义CSS样式类
progressSteps [ ] Progress steps, useful for modal queues, see usage example.
currentProgressStep null Current active progress step. The default is swal.getQueueStep().
progressStepsDistance "40px" 进度条之间的间距
onOpen null 当模态框打开是运行的函数,提供模态框DOM元素做为第一个参数
onClose null 当模态框关闭时运行的函数,提供DOM元素做为第一个参数
useRejections true Determines whether dismissals (outside click, cancel button, close button, esc key) should reject, or resolve with an object of the format { dismiss: reason }. Set it to falseto get a cleaner control flow when using await, as explained in #485.

        你可使用swal.setDefaults(customParams)来从新定义默认参数,这里的customParams是一个object对象。

        sweetAlert的方法:

method description
swal.isVisible() 肯定模态框是否显示
swal.setDefaults({Object}) 若是最后在调用SweetAlert2时使用了不少相同的设置,能够在程序开始时使用setDefaults一次性设置!
swal.resetDefaults() 从新设置默认值
swal.colse() or swal.closeModal() 用编程的方式关闭当前打开的SweetAlert2的模态框
swal.getTitle() 获取模态框的title
swal.getContent() 获取模态框的content
swal.getImage() 获取image
swal.getConfirmButton() 获取“Confirm”按钮
swal.getCancelButton() 获取“Cancel”按钮
swal.enableButtons() 启用Confirm和Cancel按钮
swal.disableButtons() 禁用Confirm和Cancel按钮
swal.enableConfirmButton() 仅启用Confirm按钮
swal.disableConfirmButton() 仅禁用Confirm按钮
swal.enableLoading() or swal.showLoading() 禁用按钮而且显示加载程序。这对AJAX请求颇有用
swal.disableLoading() or swal.hideLoading() 启动按钮而且隐藏加载程序
swal.clickConfirm() 用编程的方式点击“确认”按钮
swal.clickCancel() 用编程的方式点击“删除”按钮
swal.showValidationError(error) 显示校验错误提示
swal.resetValidationError() 隐藏校验错误提示
swal.getInput() 获取input框的DOM节点,这个方法和input参数一块儿使用
swal.disableInput() 禁用input框,被禁用的input框元素不可用而且不可被点击
swal.enableInput() 启动input
swal.queue([Array]) Provide array of SweetAlert2 parameters to show multiple modals, one modal after another or a function that returns alert parameters given modal number. See usage example.
swal.getQueueStep() Get the index of current modal in queue. When there's no active queue, null will be returned.
swal.insertQueueStep() Insert a modal to queue, you can specify modal positioning with second parameter. By default a modal will be added to the end of a queue.
swal.deleteQueueStep(index) Delete a modal at index from queue.
swal.getProgressSteps() Progress steps getter.
swal.setProgressSteps([]) Progress steps setter.
swal.showProgressSteps() Show progress steps.
swal.hideProgressSteps() Hide progress steps.
swal.isValidParameter({String}) Determine if parameter name is valid.
相关文章
相关标签/搜索