手机端弹出提示框，最好用的移动端提示框SweetAlert 插件

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


 

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

（1）文档

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

    <link href="~/Styles/sweetalert.css" rel="stylesheet" />

    <script src="~/Scripts/sweetalert.min.js"></script>
（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位置



关于它的使用。

（1）、引入js和css 

?

[html] view
plain copy

 

 





<link href="~/Content/toastr/toastr.css"rel="stylesheet"/>  

<script src="~/Content/toastr/toastr.min.js"></script>  

（2）、js初始化

[javascript] view
plain copy

 

 





<script type="text/javascript">  

  toastr.options.positionClass = 'toast-bottom-right';  

 </script>  

?

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

（3）、使用

[javascript] view
plain copy

 

 





//初始化编辑按钮  

$("#btn_edit").click(function() {  

   vararrselections = $("#tb_departments").bootstrapTable('getSelections');  

   if(arrselections.length > 1) {  

    toastr.warning('只能选择一行进行编辑');  

   

    return;  

   }  

   if(arrselections.length <= 0) {  

    toastr.warning('请选择有效数据');  

   

    return;  

   }  

      

   $('#myModal').modal();  

  });  

?

使用起来就如下一句：

toastr.warning('只能选择一行进行编辑');

是不是很简单~~这里的有四种方法分别对应四种不同颜色的提示框。

toastr.success('提交数据成功');

toastr.error('Error');

toastr.warning('只能选择一行进行编辑');

toastr.info('info');

分别对应上图中的四种颜色的提示框。

2、Messenger组件

在Bootstrap中文网里面提到了一个alert组件：Messenger。



它的使用和toastr.js这个组件基本相似，只不过效果有点不太一样。我们还是来看看它是如何使用的。

（1）效果展示

可以定位到网页的不同位置，例如下图中给出的下中位置、上中位置。





提示框的样式有三种状态：Success、Error、Info



并且支持四种不同样式的提示框：Future、Block、Air、Ice



（2）组件使用以及代码示例

关于它的使用和toastr大同小异，首先引入组件：

?
初始化它的位置

?
然后js里面使用如下：

?
如果提示框使用默认样式，也只有一句就能解决　

?
很简单很强大有木有~~

SweetAlert详解

   官方给出的SweetAlert介绍是：SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。我用过之后觉得确实好用，因此极力推荐此插件。我将它的用法总结如下：

        弹出一个alert的写法：

        其一： swal("恭喜","添加成功","success"); 第一个参数是title，第二个参数是text，第三个参数是提醒类型（success,error,warning,input），三个参数皆非必写项。最简便写法：swal("");就弹出一个框，上面有个确定按钮。不可写作：

swal();

      


       其二：

       swal({

                title:"恭喜",

                text:"添加成功",

                type:"success"

        });

       参数还可以写：

       html：是否支持html，默认false,写成true以后，text里就可以写html元素。下面给一个例子

      


       showCancelButton：是否显示取消按钮；

       animation：提示框弹出时的动画效果，可选（pop、none、slide-from-top、slide-from-bottom）；

       timer：设置自动关闭提示框时间（毫秒）；

       showConfirmButton：是否显示确定按钮；

       confirmButtonText：定义确定按钮文本；

       cancelButtonText：定义取消按钮文本；

       imageUrl：定义弹出框的图片地址；

       回调函数：done()和error.

       下面给出一个confirm窗体带回调函数的例子：

[javascript] view
plain copy

function deleteArticle(id){  

       var serverAddress=serverAddressPath+'/api/arc/delete.shtml';  

       swal({  

          title:"",  

          text:"确定删除吗？",  

          type:"warning",  

          showCancelButton:"true",  

          showConfirmButton:"true",  

          confirmButtonText:"确定",  

          cancelButtonText:"取消",  

          animation:"slide-from-top"  

        }, function() {  

               var ids=new Array();  

        ids.push(id+"");  

        $.ajax({  

            type:"post",  

            url:serverAddress,  

            traditional: true,  

            dataType:"json",  

            data:{"id":ids}  

        }).done(function(data) {  

                  swal("操作成功!", "已成功删除数据！", "success");  

                  getMyArtic();  

               }).error(function(data) {  

                  swal("OMG", "删除操作失败了!", "error");  

               });  

         });  

      }  

        



版权声明：本文为博主原创文章，未经博主允许不得转载。