alert警告框的显示和隐藏

<link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.css">
    
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function show(){
        document.getElementById("show").style.display="";
    }
</script>
<div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="false">
            &times;
        </button>
        成功！很好地完成了提交。
    </div>
    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        信息！请注意这个信息。
    </div>
    <div class="alert alert-warning alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        警告！请不要提交。
      <a href="http://www.baidu.com">百度</a>
    </div>
    <div class="alert alert-danger alert-dismissable" id="show" style="display: none;">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        错误！请进行一些更改。
    </div>
    <button onclick="show()">显示提示框</button>

注意事项：
1、要引入jq和boostrap.js
2、alert-dismissable 设置的是button里面×的样式
3、button 必须设自定义属性data-dismiss="alert"
4、默认情况下，警告框隐藏，触发事件时才显示，请看show方法
5、还可以添加超链接