通过类名样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.js"></script>
</head>
<body>
<div class="alert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>警告框标题</strong> 提交失败!
</div>
</body>
</html>
加上点击X关闭事件并弹出 此方法:把警告框和弹出模态框插件,捆绑应用 !无需复制上面代码,下面是案例为完整案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.js"></script>
</head>
<body>
<div class="alert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>警告框标题</strong> 提交失败!
</div>
<!--模态框组件-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>提示</h3>
</div>
<div class="modal-body">
<p>确定要关闭警告框信息?</p>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--添加用户行为-->
<script type="text/javascript">
$(function() {
$(".close").click(function() {
$(this).alert("close");
});
$(".alert").on("close.bs.alert", function(e) {
$("#myModal").modal();
});
});
</script>
</body>
</html>
效果: