JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示 - 懒得安分(3)_H5之家

$("#btn_delete").click(function () { var arrselections = $("#tb_departments").bootstrapTable('getSelections'); if (arrselections.length <= 0) { toastr.warning('请选择有效数据'); return; } bootbox.alert("确认删除", function () { var strResult = ""; }) bootbox.prompt("确认删除", function (result) { var strResult = result; }) bootbox.confirm("确认删除", function (result) { var strResult = result; }) });

效果展示：

更多用法可以参见api。使用起来基本很简单。这个组件最大的特点就是和bootstrap的风格能够很好的保持一致。

3、在网上还找到一个效果比较炫一点的提示框：sweetalert

要使用它，还是老规矩：Nuget。

（1）文档

sweetalert Api：

开源项目源码：https://github.com/t4t5/sweetalert

（2）在cshtml页面引入js和css

（3）js使用

　　　　　swal({ title: "操作提示", //弹出框的title text: "确定删除吗？", //弹出框里面的提示文本 type: "warning", //弹出框类型 showCancelButton: true, //是否显示取消按钮 confirmButtonColor: "#DD6B55",//确定按钮颜色 cancelButtonText: "取消",//取消按钮文本 confirmButtonText: "是的，确定删除！",//确定按钮上面的文档 closeOnConfirm: true }, function () { $.ajax({ type: "post", url: "/Home/Delete", data: { "": JSON.stringify(arrselections) }, success: function (data, status) { if (status == "success") { toastr.success('提交数据成功'); $("#tb_departments").bootstrapTable('refresh'); } }, error: function () { toastr.error('Error'); }, complete: function () { } }); });

（4）效果展示：

点击确定后进入回调函数：

组件很多，用哪种园友没可以自行决定，不过博主觉得像一些互联网、电子商务类型的网站用sweetalert效果比较合适，一般的内部系统可能也用不上。

三、操作完成提示框 1、toastr.js组件

关于信息提示框，博主项目中使用的是toastr.js这么一个组件，这个组件最大的好处就是异步、无阻塞，提示后可设置消失时间，并且可以将消息提示放到界面的各个地方。先来看看效果。

显示在不同位置：

top-center位置

bottom-left位置

官方文档以及源码

源码网站：

api：

关于它的使用。

（1）、引入js和css

（2）、js初始化

将这个属性值设置为不同的值就能让提示信息显示在不同的位置，如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等，更过位置信息请查看文档。

（3）、使用

//初始化编辑按钮 $("#btn_edit").click(function () { var arrselections = $("#tb_departments").bootstrapTable('getSelections'); if (arrselections.length > 1) { toastr.warning('只能选择一行进行编辑'); return; } if (arrselections.length <= 0) { toastr.warning('请选择有效数据'); return; } $('#myModal').modal(); });