最近我在学Bootstrap，比较难点和重要部分就会分享在这里，方便自己学习也方便“志同道合”的伙伴们一起看看。今天在这里学的是“Bootstrap方法中模态框插件”。有错误的地方欢迎大家给我指正和分享更棒的你们的一组学习方法。
<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="utf-8">
<title>模态框插件</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body style="margin:100px;">
<!-- 模态框申明 tabindex:可以使用esc键关闭 fade:淡入淡出效果 -->
<div class="modal fade" id="myModal" tabindex="-1">
<!-- 窗口申明 modal-sm:小窗口； modal-lg：大窗口； 不写则代表是正常大小的窗口-->
<div class="modal-dialog modal-sm">
<!-- 内容申明 -->
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">会员登录</h4>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">1</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">2</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">3</div>
</div>
</div>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
<!-- 方法一 -->
<!-- data-backdrop="static";点击空白区域不会关闭窗口，只能通过esc键和关闭按钮且有黑白灰背景。false和static属性一样，但是没有黑白灰属性而已。 -->
<!-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">点击登录窗口弹出</button> -->
<!-- 方法二 -->
<button class="btn btn-primary btn-lg" id="Btn">点击登录窗口弹出</button>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- 方法二 -->
<script type="text/javascript">
$('#Btn').on('click',function(){
$('#myModal').modal('show');
})
// $('#myModal').modal({
// show: false,
// })
$('#myModal').on('hide.bs.modal',function(){
alert('确定关闭吗？');
})
$('#myModal').on('hidden.bs.modal',function(){
alert("关闭成功！");
})
</script>
</html>
效果如下：
