ShowMessage对delphi开发人员而言，是个非常熟悉的玩意，常常需要在软件上做一些合适的提醒，以达到更好的用户体验。今天我们来介绍一下网站里的提示框，也就是JavaSciprt中的alert，同时也介绍一下如何使用三方的js插件，来达到更好的效果。
首先，我们来看一下JavaScript的alert代码和效果，如下：
|
1
2
3
|
<script type="text/javascript">
alert('hello world!');
</script> |
这就是js基本的提示框样式了，比较简单，我们一般在调试时用来输出一些数据用用，正式场合一般不用，所以就这样简单的盖过吧。
推荐一个三方的js插件，名字叫sweetalert，官网地址是 http://t4t5.github.io/sweetalert/ github地址是 https://github.com/t4t5/sweetalert ，简单介绍一下它的用法和效果，如下：
首先，讲下如何安装sweetalert，非常简单，只要在页中引用它的js和css就可以了，代码如下：
|
1
2
|
<script src="//cdn.bootcss.com/sweetalert/1.1.3/sweetalert-dev.min.js"></script>
<link href="//cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
|
我这里是引用的cdn上的链接，你也可以去官网下载到本地，引用本地文件。然后就可以开始调用它了，代码如下：
|
1
2
3
|
<script type="text/javascript">
swal("Hello world!");
</script> |
也就是把alert直接替换成swal就行了，是不是很简单？效果如下：
我们再来介绍一下它的其它几种用法，效果图就不贴了，只贴代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//用于提示出错信息swal({ <a href="title:"","这是个出错提示">title:"","这是个出错提示</a>！",
type:"error",
confirmButtonColor:"#428bca",
confirmButtonText:"关闭"
});//用于提示完成信息，注意timer参数，是指这个时间后自动关闭提示框swal({ <a href="title:"","恭喜！操作完成！",timer: 5000,type:"success"">title:"",
"恭喜！操作完成！",
ti</a><a href="mer: 5000,t">mer: 5000,
t</a><a href="title:"","恭喜！操作完成！",timer: 5000,type:"success"">ype:"success"</a>,
confirmButtonColor:"#428bca",
confirmButtonText:"关闭"
}); |
当然还有询问提示框等应用方式，比如询问是否进行删除操作，代码和效果如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
swal({ title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
}); |
其它的一些用法，请参考官网的介绍，今天是否学会如何为您的网站或者应用页增加提示框了呢？网上还有很多类似的js插件，可以像delphi的vcl一样帮您解决很多问题，增加开发效率。
https://www.offeu.com/www/index_id_134.html