Bootstrap3 Toast消息框插件

一款Bootstrap3 Toast消息框插件，通过四个不同的按钮来触发不同类型的消息框插件，每个消息框都可以设置消息内容、消息类型、弹出位置和自动消失的时间等参数，颜色图标等样式也可以自由调整。

分类：悬浮层/弹出层 > 弹窗难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用bootstrap.min.css，并引入样式文件bootoast.css，代码如下：

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/bootoast.css">
<style type="text/css">
	h3{color: #D5D6E2;}
</style>

页面的body部分，div容器里放了四个button按钮，代码如下：

<div class="container">
	<div class="row" style="padding: 2em 0;">
		<h3>点击按钮查看Toast效果</h3>
		<button id="info" class="btn btn-info">Info</button>
		<button id="success" class="btn btn-success">Success</button>
		<button id="warning" class="btn btn-warning">Warning</button>
		<button id="danger" class="btn btn-danger">Danger</button>
	</div>
</div>

页面的底部，需调用jQuery库和bootoast插件，分别设置每个消息框的事件响应，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootoast.js"></script>
<script type="text/javascript">
$( "#info" ).click(function() {
	  bootoast({
	    message: 'This is an info toast message',
	    position:'right-bottom',
		timeout:2
	  });
	});

	$( "#success" ).click(function() {
	  bootoast({
	    message: 'This is a success toast message',
		type: 'success',
		position:'right-bottom',
		timeout:2
	  });
	});

	$( "#warning" ).click(function() {
	  bootoast({
	    message: 'This is a warning toast message',
		type: 'warning',
		position:'right-bottom',
		timeout:2
	  });
	});

	$( "#danger" ).click(function() {
	  bootoast({
	    message: 'This is a danger toast message',
		type: 'danger',
		position:'right-bottom',
		timeout:2
	  });
});
</script>