Bootstrap模态框

Bootstrap模态框

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- 模态框 -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- 模态内容 -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

效果如下：

一些说明：

Trigger的部分
为打开模态框，需要一个button或者link，需要包括2个data-*属性：

• data-toggle="modal"表示打开一个模态框
• data-target="#myModal"表示model的id

Modal的部分

• <div>模态必须有一个id的值与data-target一致
• 类.modal，用来把 <div> 的内容识别为模态框
• 类.fade，当模态框被切换时，它会引起内容淡入淡出
• role="dialog"提高了使用屏幕阅读器的人的可访问性
• .modal-dialog设置模态的适当宽度和边距
• modal-header 是为模态窗口的头部定义样式的类
• modal-body用于为模态窗口的主体设置样式
• modal-footer用于为模态窗口的底部设置样式
• data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口

模态框的大小
可通过modal-sm和modal-lg，设置模态框的大小

Bootstrap JS Modal

参考Bootstrap JS Modal

通过按钮来触发弹出模态框

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>

选项

1.backdrop，默认为true，有dark的覆盖层，为false，则没有覆盖层，为static时，点击modal外的地方，则不能关闭模态框

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal({backdrop: true});
    });
    $("#myBtn2").click(function(){
        $("#myModal2").modal({backdrop: false});
    });
    $("#myBtn3").click(function(){
        $("#myModal3").modal({backdrop: "static"});
    });
});

2.keyboard，默认为true，当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
3.show，默认为true，表示实例化时展示模态框

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal({show: true});
    });
    $("#myBtn2").click(function(){
        $("#myModal2").modal({show: false});
    });
});
</script>

方法

1..modal(options)把内容作为模态框激活。接受一个可选的选项对象
2..modal('toggle')手动切换模态框
3..modal('show')手动打开模态框。
4..modal('hide')手动隐藏模态框