bootstrap优美的弹出框

使用bootstrap框架发现没有好的提示框

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

（1）文档

sweetalert Api：http://t4t5.github.io/sweetalert/

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

在页面引入： 

 <link href="~/Styles/sweetalert.css" rel="stylesheet" />
 <script src="~/Scripts/sweetalert.min.js"></script>

使用方法：

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 () {

                        }

                    });
            });

操作完成提示框

toastr.js组件

官方文档以及源码

源码网站：http://codeseven.github.io/toastr/

api：http://www.ithao123.cn/content-2414918.html

<link href="~/Content/toastr/toastr.css" rel="stylesheet" />
<script src="~/Content/toastr/toastr.min.js"></script>

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

	toastr.options = {
		    closeButton: false,  // 是否显示关闭按钮，（提示框右上角关闭按钮）
		    debug: false,        // 是否使用deBug模式
		    progressBar: true,    // 是否显示进度条，（设置关闭的超时时间进度条）
		    positionClass: "toast-top-center",   // 设置提示款显示的位置
		    onclick: null,         // 点击消息框自定义事件 
		    showDuration: "300",   // 显示动画的时间
		    hideDuration: "1000",   //  消失的动画时间
		    timeOut: "2000",          //  自动关闭超时时间 
		    extendedTimeOut: "1000",   //  加长展示时间
		    showEasing: "swing",      //  显示时的动画缓冲方式
		    hideEasing: "linear",      //   消失时的动画缓冲方式
		    showMethod: "fadeIn",     //   显示时的动画方式
		    hideMethod: "fadeOut"     //   消失时的动画方式
		}; 

用法：

1  toastr.success('提交数据成功');
2  toastr.error('Error');
3  toastr.warning('只能选择一行进行编辑');
4  toastr.info('info');

对toastr进行封装：

Success：

//提示信息
function toastrSuccess(content){
	toastr.options = {
		    closeButton: false,  // 是否显示关闭按钮，（提示框右上角关闭按钮）
		    debug: false,        // 是否使用deBug模式
		    progressBar: true,    // 是否显示进度条，（设置关闭的超时时间进度条）
		    positionClass: "toast-top-center",   // 设置提示款显示的位置
		    onclick: null,         // 点击消息框自定义事件 
		    showDuration: "300",   // 显示动画的时间
		    hideDuration: "1000",   //  消失的动画时间
		    timeOut: "2000",          //  自动关闭超时时间 
		    extendedTimeOut: "1000",   //  加长展示时间
		    showEasing: "swing",      //  显示时的动画缓冲方式
		    hideEasing: "linear",      //   消失时的动画缓冲方式
		    showMethod: "fadeIn",     //   显示时的动画方式
		    hideMethod: "fadeOut"     //   消失时的动画方式
		};
	    if (content == null) {
	        content = '';
	    }
	    var len = content.length;
	    if (len <= 10 && len > 0) {
	        toastr.options.timeOut = "1800";
	    } else if (len <= 20) {
	        toastr.options.timeOut = "2800";
	    } else if (len <= 30) {
	        toastr.options.timeOut = "3800";
	    } else if (len > 30) {
	        toastr.options.timeOut = "4800";
	    }
	    toastr.success(content);
}