模态框

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集

基础实例

以下模态框包含了模态框的头、体和一组放置于底部的按钮

​x
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

可选尺寸

模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现

xxxxxxxxxx
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Large
    modal</button>
<div class="modal fade" id="myModal1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Small
    modal</button>
<div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

方法

.modal('show')

xxxxxxxxxx
$('#myModal').modal('show')

.modal('hide')

xxxxxxxxxx
$('#myModal').modal('hide')

.modal('toggle')

xxxxxxxxxx
$('#myModal').modal('toggle')

事件

xxxxxxxxxx
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

实时效果反馈

1. 下列那个方法可以直接调出模态框：

A .modal('show')

B .modal('hide')

C .modal('toggle')

D .$('#myModal').on('hidden.bs.model',function(){})

答案

1=>A