Bootstrap模态框（Modal）的运用

发表时间： 2017-09-28 15:01:07 | 浏览次数：

1.下面举一个简单的例子：

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框1</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div>
    </div>
</div>

2.以上的例子点击该模态框意外的地方或者按Esc键，该模态框就会关闭，为了避免有时误操作关闭了模态框，下面举一个只能点击关闭按钮，关闭模态框的例子：

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2" data-backdrop="static" data-keyboard="false">开始演示模态框2</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">
				点击模态框以外的地方，不会关闭<br/>
				按Esc键，不会关闭<br/>
				只能按“&times;”和“关闭”按钮才能关闭
			</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div>
    </div>
</div>

3.模态框还可以通过异步调用：

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" href="http://localhost/bootstrap/modal/demo2.html" data-toggle="modal" data-target="#myModal3">开始演示模态框3</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
			<!-- 异步请求的数据将在这里呈现 -->
        </div>
    </div>
</div>

<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">
	异步请求模态框
</div>
<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	<button type="button" class="btn btn-primary">提交更改</button>
</div>

4.可以使用JavaScript对模态框进行操作：

//把内容作为模态框激活。接受一个可选的选项对象。
$('#identifier').modal({
	keyboard: false
});
//手动切换模态框
$('#identifier').modal('toggle');
//手动打开模态框
$('#identifier').modal('show');
//手动隐藏模态框
$('#identifier').modal('hide');

//在调用 show 方法后触发
$('#identifier').on('show.bs.modal', function () {
	// 执行一些动作...
})

//当模态框对用户可见时触发（将等待 CSS 过渡效果完成）
$('#identifier').on('shown.bs.modal', function () {
	// 执行一些动作...
})

//当调用 hide 实例方法时触发
$('#identifier').on('hide.bs.modal', function () {
	// 执行一些动作...
})

//当模态框完全对用户隐藏时触发
$('#identifier').on('hidden.bs.modal', function () {
	// 执行一些动作...
})

5.Bootstrap 模态框（Modal）插件的大小分别有3种，一种是默认大小，另外两种是medal-lg和modal-sm，使用方法如下：