免费申请com网站,网站开发主流方法,先搭建网站还是先做ui,网站内页没有排名SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框#xff0c;它提供各种参数和方法#xff0c;支持嵌入图片#xff0c;背景#xff0c;HTML标签等#xff0c;并提供5种内置的情景类#xff0c;功能非常强大。SweetAlert2…SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框它提供各种参数和方法支持嵌入图片背景HTML标签等并提供5种内置的情景类功能非常强大。SweetAlert2是SweetAlert-js的升级版本它解决了SweetAlert-js中不能嵌入HTML标签的问题并对弹出对话框进行了优化同时提供对各种表单元素的支持还增加了5种情景模式的模态对话框。安装可以通过bower或npm来安装sweetalert2对话框插件。bower install sweetalert2 npm install sweetalert2使用方法使用SweetAlert2对话框需要在页面中引入sweetalert2.min.css和sweetalert2.min.js文件为了兼容IE浏览器还需要引入promise.min.js文件。link relstylesheet typetext/css hrefpath/to/sweetalert2/dist/sweetalert2.min.css script srcpath/to/sweetalert2/dist/sweetalert2.min.js/script !-- for IE support -- script srcpath/to/es6-promise/promise.min.js/script基本使用最基本的使用方法是通过swal()来弹出一个对话框。 swal(Hello world!);如果要弹出一个带情景模式的对话框可以在的第二个参数中设置。swal(Oops..., Something went wrong!, error);你可以通过下面的方法来处理对话框的用户交互swal({title: Are you sure?,text: You will not be able to recover this imaginary file!,type: warning,showCancelButton: true,confirmButtonText: Yes, delete it!,cancelButtonText: No, keep it, }).then(function(isConfirm) {if (isConfirm true) {swal(Deleted!,Your imaginary file has been deleted.,success);} else if (isConfirm false) {swal(Cancelled,Your imaginary file is safe :),error);} else {// Esc, close button or outside click// isConfirm is undefined} });swal(...)会返回一个Promise对象该Promise对象中then方法中的isConfirm参数的含义如下true代表Confirm确认按钮。false代表Cancel取消按钮。undefined代表按下Esc键点击取消按钮或在对话框之外点击。模态对话框的类型sweetalert2提供了5种情景模式的对话框。配置参数参数默认值描述titlenull模态对话框的标题。它可以在参数对象的title参数中设置也可以在swal()方法的第一个参数设置。textnull模态对话框的内容。它可以在参数对象的text参数中设置也可以在swal()方法的第二个参数设置。htmlnull对话框中的内容作为HTML标签。如果同时提供text和html参数插件将会优先使用text参数。typenull对话框的情景类型。有5种内置的情景类型warningerrorsuccessinfo和question。它可以在参数对象的type参数中设置也可以在swal()方法的第三个参数设置。customClassnull模态对话框的自定义class类。animationtrue如果设置为false对话框将不会有动画效果。allowOutsideClicktrue是否允许点击对话框外部来关闭对话框。allowEscapeKeytrue是否允许按下Esc键来关闭对话框。showConfirmButtontrue是否显示“Confirm确认”按钮。showCancelButtonfalse是否显示“Cancel取消”按钮。confirmButtonTextOK确认按钮上的文本。cancelButtonTextCancel取消按钮上的文本。confirmButtonColor#3085d6确认按钮的颜色。必须是HEX颜色值。cancelButtonColor#aaa取消按钮的颜色。必须是HEX颜色值。confirmButtonClassnull确认按钮的自定义class类。cancelButtonClassnull取消按钮的自定义class类。buttonsStylingtrue为按钮添加默认的swal2样式。如果你想使用自己的按钮样式可以将该参数设置为false。reverseButtonsfalse如果你想反向显示按钮的位置设置该参数为true。showLoaderOnConfirmfalse设置为true时按钮被禁用并显示一个在加载的进度条。该参数用于AJAX请求的情况。preConfirmnull在确认之前执行的函数返回一个Promise对象。imageUrlnull为模态对话框自定义图片。指向一幅图片的URL地址。imageWidthnull如果设置了imageUrl参数可以为图片设置显示的宽度单位像素。imageHeightnull如果设置了imageUrl参数可以为图片设置显示的高度单位像素。imageClassnull自定义的图片class类。timernull自动关闭对话框的定时器单位毫秒。width500模态窗口的宽度包括padding值box-sizing: border-box。padding20模态窗口的padding内边距。background#fff模态窗口的背景颜色。inputnull表单input域的类型可以是text, email, password, textarea, select, radio, checkbox 和 file。inputPlaceholderinput域的占位符。inputValueinput域的初始值。inputOptions{} 或 Promise如果input的值是select或radio你可以为它们提供选项。对象的key代表选项的值value代表选项的文本值。inputAutoTrimtrue是否自动清除返回字符串前后两端的空白。inputValidatornull是否对input域进行校验返回Promise对象。inputClassnull自定义input域的class类。你可以使用swal.setDefaults(customParams)方法来覆盖默认的参数customParams是一个对象。方法方法描述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: 12Safari: 4Firefox: 4Chrome 14Opera: 15SweetAlert2模态对话框插件的github地址为https://github.com/limonte/sweetalert2SweetAlert2模态对话框插件的官方教程地址为https://sweetalert2.github.io/SweetAlert2使用教程​www.aliyun01.com