简介
插件的引入方式
Bootsstrap框架的所有JavaScript插件都依赖jQuery。所以必须在引入bootstrap.js或者bootstrap.min.js之前引入jQuery库。
data属性
关闭data属性
过渡插件
模态框
简介
模态框的实现
示例
<body>
<div id="mymodal1" class="modal fade"><!--生成一个宽为100%灰色背景-->
<div class="modal-dialog"><!--居中生成一个白色窗口-->
<div class="modal-content"><!--模态框内容-->
<div class="modal-header"><!--头部内容-->
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">我的模态框</h4>
</div>
<div class="modal-body">你好</div><!--主体内容-->
<div class="modal-footer"><!--底部内容-->
<button class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#mymodal1").modal();//初始化页面时,弹出模态框
</script>
运行结果
注意事项
通过点击按钮弹出模态框
示例
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal2">弹出</button>
<div id="mymodal2" class="modal fade"><!--生成一个宽为100%灰色背景-->
<div class="modal-dialog"><!--居中生成一个白色窗口-->
<div class="modal-content"><!--模态框内容-->
<div class="modal-header"><!--头部内容-->
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">我的模态框</h4>
</div>
<div class="modal-body">你好</div><!--主体内容-->
<div class="modal-footer"><!--底部内容-->
<button class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
运行结果
示例
<a href="#mymodal2" data-toggle="modal" class="btn btn-primary">弹出</a>
<div id="mymodal2" class="modal fade"><!--生成一个宽为100%灰色背景-->
<div class="modal-dialog"><!--居中生成一个白色窗口-->
<div class="modal-content"><!--模态框内容-->
<div class="modal-header"><!--头部内容-->
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">我的模态框</h4>
</div>
<div class="modal-body">你好</div><!--主体内容-->
<div class="modal-footer"><!--底部内容-->
<button class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
运行结果和上面一样
模态框尺寸
示例
<!--模态框尺寸-->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal3">弹出大</button>
<div id="mymodal3" class="modal fade"><!--生成一个宽为100%灰色背景-->
<div class="modal-dialog bs-example-modal-lg"><!--居中生成一个白色窗口-->
<div class="modal-content modal-lg"><!--模态框内容-->
<div class="modal-header"><!--头部内容-->
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">我的模态框</h4>
</div>
<div class="modal-body">你好</div><!--主体内容-->
<div class="modal-footer"><!--底部内容-->
<button class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal4">弹出小</button>
<div id="mymodal4" class="modal fade"><!--生成一个宽为100%灰色背景-->
<div class="modal-dialog bs-example-modal-sm"><!--居中生成一个白色窗口-->
<div class="modal-content modal-sm"><!--模态框内容-->
<div class="modal-header"><!--头部内容-->
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">我的模态框</h4>
</div>
<div class="modal-body">你好</div><!--主体内容-->
<div class="modal-footer"><!--底部内容-->
<button class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
运行结果 点击弹出大
点击弹出小
模态框data属性
示例 测试data-backdrop属性
<!--演示属性-->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal5">弹出</button>