响应式前端框架Bootstrap系列（12）警告框

警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。警告框的样式有以下几种：

.alert .alert-success：表示成功。
.alert .alert-info：表示信息。
.alert .alert-warning：表示警告。
.alert .alert-danger：表示危险。
.alert-dismissable：放置在带.alert的<div>中，常与一个带标签属性class="close" data-dismiss="alert" aria-hidden="true"的<button>配合使用，表示取消警告框。
.alert-link：与<a>配合使用，表示警告文本连接。

警告有3种方式，分别是普通警告、带取消的警告和带链接的警告。

普通警告，演示代码：

<p>基本警告框</p>
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>

效果图：

带取消的警告框，演示代码：

<p>可取消警告框</p>
<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    ×
	</button> 成功！很好地完成了提交。
</div>
<div class="alert alert-info">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    ×
	</button> 信息！请注意这个信息。
</div>
<div class="alert alert-warning">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    ×
	</button> 警告！请不要提交。
</div>
<div class="alert alert-danger">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    ×
	</button> 错误！请进行一些更改。
</div>

效果图：

带链接的警告框，演示代码：

<p>带连接的警告框</p>
<div class="alert alert-success">
	<a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>
<div class="alert alert-info">
	<a href="#" class="alert-link">信息！请注意这个信息。</a>
</div>
<div class="alert alert-warning">
	<a href="#" class="alert-link">警告！请不要提交。</a>
</div>
<div class="alert alert-danger">
	<a href="#" class="alert-link">错误！请进行一些更改。</a>
</div>

效果图：

动态警告框，是指可控制显示和隐藏的警告框，您可以向所有的警告框消息添加可取消（dismiss）功能。演示代码：

<style>
	#myAlert {
		transition: margin-top .15s linear, opacity .15s linear;
	}
	
	#alertBox {
		position: absolute;
		left: 50%;
		margin-left: -400px;
		height: 100px;
		width: 800px;
	}
</style>

<div class="container">
	<div id="alertBox">
		<div class="alert alert-danger" id="myAlert" style="opacity: 1;">
			<a href="#" class="close" data-dismiss="alert">
				×
			</a>
			<strong>警告！</strong>您的网络连接有问题。
		</div>
	</div>
	<button class="btn btn-default" οnclick="showFun();">show</button>
	<button class="btn btn-default" οnclick="closeFun();">close</button>
</div>

<script>
	// 方法
	function showFun() {
		$("#myAlert").css("margin-top", "0px");
		$("#myAlert").css("opacity", 1);
	}

	function closeFun() {
		$("#myAlert").css("margin-top", "10px");
		$("#myAlert").css("opacity", 0);
		//$("#myAlert").alert('close'); //关闭所有的警告框,整个消息框被移除
	}
	// 事件
	$("#myAlert").bind('closed.bs.alert', function() {
		console.log("警告消息框被关闭。");
	});
</script>

（注）基于jquery库有一套Layer插件，提供了各式各样的弹窗效果，可参看http://layer.layui.com/