SweetAlert2强大纯Js模态消息对话框插件.pdf

SweetAlert2强⼤的纯Js模态消息对话框插件 查看演⽰ website 下载地址：https://github .com/limonte/sweetalert2 插件描述：SweetAlertj s的升级版本，⽀持嵌⼊图⽚，背景，HTML标签 等并 供5种内置的情景类，功能⾮常强⼤。 简要教程 SweetAlert2是⼀款功能强⼤的纯Js模态消息对话框插件。SweetAlert2⽤于替代浏览器 默认的弹出对话框，它 供各种参数和⽅法，⽀持嵌⼊图⽚，背景，HTML标签等， 并 供5种内置的情景类，功能⾮常强⼤。 SweetAlert2是SweetAlert j s的升级版本，它解决了SweetAlert j s中不能嵌⼊HTML标签 的问题，并对弹出对话框进⾏了优化，同时 供对各种表单元素的⽀持，还增加了5 种情景模式的模态对话框。 安装 可以通过bower或npm来安装sweetalert2对话框插件。 bower install sweetalert2 npm install sweetalert2 使⽤⽅法 使⽤SweetAlert2对话框需要在页⾯中引⼊sweetalert2.min .css和sweetalert2.min .j s⽂件， 为了兼容IE浏览器，还需要引⼊promise .min .j s⽂件。 link rel=stylesheet type=text/css href=path/to/sweetalert2/d script src=path/to/sweetalert2/dist/sweetalert2.min.js/script !-- for E support -- script src=path/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种情景模式的对话框。 配置参数 参数 默认 描述 title null 模态对话框的标题。它可以在参数对象的title 参数中设置