禁止Twitter Bootstrap模式窗口closures
我正在使用Twitter Bootstrap创build一个模式窗口。 默认的行为是如果你点击模态区域之外，模态会自动closures。 我想禁用 – 即在模态外单击时不closures模态窗口。
有人可以分享jQuery代码来做到这一点？
我相信你想把背景值设置为静态 。 如果要避免在使用Esc键时closures窗口，则必须设置另一个值。
例：
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#"> 或者如果你正在使用JavaScript：
$('#myModal').modal({ backdrop: 'static', keyboard: false });
只需将backdrop属性设置为'static' 。
$('#myModal').modal({ backdrop: 'static', keyboard: true })
您可能还希望将keyboard属性设置为false因为这样可以防止通过按键盘上的Esc键来closures模式。
$('#myModal').modal({ backdrop: 'static', keyboard: false })
myModal是包含模态内容的div的ID。
您也可以在模态定义本身中包含这些属性：
<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
如果你已经初始化了模态窗口，那么你可能需要使用$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})来重置选项$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})它将应用新的选项。
重写Dialog的Bootstrap'hide'事件并停止其默认行为（处理对话框）。
请参阅下面的代码片段：
$('#yourDialogID').on('hide.bs.modal', function(e) { e.preventDefault(); });
在我们的情况下，它工作正常。
是的，你可以这样做：
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
有点像@ AymKdn的答案，但这将允许你改变选项，而无需重新初始化模态。
$('#myModal').data('modal').options.keyboard = false;
或者，如果您需要做多个选项，JavaScript在这里派上用场！
with ($('#myModal').data("modal").options) { backdrop = 'static'; keyboard = false; }
如果模式已经打开，这些选项才会在下一次打开模式时生效。
只需添加这两个东西
data-backdrop="static" data-keyboard="false"
现在看起来像这样
<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
它将禁用退出button，并在任何地方点击并隐藏。
您可以禁用背景的点击closures行为，并通过将此JavaScript添加到您的页面（确保在jQuery和Bootstrap JS加载后执行），将其设置为所有模式的默认设置：
$(function() { $.fn.modal.Constructor.DEFAULTS.backdrop = 'static'; });
正如D3VELOPER所说，下面的代码可以解决它：
$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});
我正在使用jquery＆bootstrap，只是removeData('modal')不起作用。
我发现最好的是将此代码添加到链接
<!-- Link --> <a href="#mdl" role="button" data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a> <-- Div --> <div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>
如果有人来自Google，试图找出如何阻止某人closures某个模式，请不要忘记该模式右上angular还有一个closuresbutton需要删除。
我用一些CSS来隐藏它：
#Modal .modal-header button.close { visibility: hidden; }
请注意，使用“display：none;” 当模式被创build时被覆盖，所以不要使用它。
如果您想有条件地禁用backdrop click closingfunction。 您可以使用以下行将运行时的backdrop选项设置为static 。
Bootstrap v3.xx
jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';
Bootstrap v2.xx
jQuery('#MyModal').data('modal').options.backdrop = 'static';
这将阻止已经实例化的backdrop模式选项设置为false （ 默认行为 ），从closures。
在选项章节中，在您链接的页面上，您可以看到backdrop选项。 通过这个选项的值'static'将阻止closures模式。
你也可以通过{keyboard: false}来防止按Escclosures模式。
如果你用js打开模式，使用：
$('#myModal').modal({ backdrop: 'static', keyboard: false });
如果您正在使用数据属性，请使用：
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false"> Launch modal </button>
这样做现在非常简单。 只需添加：
data-backdrop="static" data-keyboard="false"
在你的模态分频器。
那么，这是你们中的一些人可能会寻找的另一个解决scheme（就像我..）
我的问题是类似的，模式框closures，而我的内部的iframe加载，所以我不得不禁用模式解雇，直到Iframe完成加载，然后重新启用。
这里介绍的解决scheme不是100％。
我的解决scheme是：
showLocationModal = function(loc){ var is_loading = true; if(is_loading === true) { is_loading = false; var $modal = $('#locationModal'); $modal.modal({show:true}); // prevent Modal to close before the iframe is loaded $modal.on("hide", function (e) { if(is_loading !== true) { e.preventDefault(); return false } }); // populate Modal $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){ is_loading = true; }); }};
所以我暂时阻止Modalclosures：
$modal.on("hide", function (e) { if(is_loading !== true) { e.preventDefault(); return false } });
但是，在israme加载完成之后，var is_loading将重新启用closures。
您可以使用下面的代码行来设置模式popup的默认行为：
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
<button type="button" class="btn btn-info btn-md" id="myBtn3">Static Modal</button> <!-- Modal --> <div class="modal fade" id="myModal3" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Static Backdrop</h4> </div> <div class="modal-body"> <p>You cannot click outside of this modal to close it.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data- dismiss="modal">Close</button> </div> </div> </div> </div> <script> $("#myBtn3").click(function(){ $("#myModal3").modal({backdrop: "static"}); }); }); </script>
