默认情况下，bootstrap 弹出框点击其他区域时，弹出框会自动关闭，在很多时候，我们可能会希望达到和原生弹出框一样的效果，避免不小心点击其他区域时弹框自动隐藏，尤其是对于一些复杂的表单，重复填写可能会带来很不好的体验效果，所以，我们会希望不会发生这种情况，事实上bootstrap dialog提供了大量的选项可以设置各种dialog的行为和效果。如下所示：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
            </div>
        </div>
    </div>
</div>

$("#add").click(function () {
    $("#myModalLabel").text("新增");
    $(‘#myModal‘).modal({backdrop:"static"}); --设置为static后可以防止不小心点击其他区域是弹出框消失
});
其他更多选项可见http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

bootstrap 弹出框点击其他区域时弹出框不消失选项设置