禁止Twitter Bootstrap模式窗口关闭

作者: 昵称为空呵呵
发布时间: 2025-06-15 06:01:45 (22天前)
转自：

14 条回复

0#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果有人来谷歌试图弄清楚如何阻止某人关闭模态，请不要忘记在模式右上角还有一个需要删除的关闭按钮。 </p> <P> 我使用了一些CSS来隐藏它： </p> <pre> <code> #Modal .modal-header button.close { visibility: hidden; } </code> </pre> <P> 请注意，使用“display：none;”创建模态时会被覆盖，所以不要使用它。 </p> </DIV>

编辑
1#
回复此人
离线请留言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以通过将此JavaScript添加到页面中来禁用后台的单击关闭行为并将其设置为所有模式的默认值（确保在加载jQuery和Bootstrap JS后执行）： </p> <pre> <code> $(function() { $.fn.modal.Constructor.DEFAULTS.backdrop = 'static'; }); </code> </pre> </DIV>

编辑
2#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用以下代码行设置模式弹出窗口的默认行为： </p> <pre> <code> $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static'; </code> </pre> </DIV>

编辑
3#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 正如D3VELOPER所说，以下代码解决了它： </p> <pre> <code> $('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); </code> </pre> <P> 我正在使用jquery和amp;引导和简单 <code> removeData('modal') </code> 不工作。 </p> </DIV>

编辑
4#
回复此人
不见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <button type="button" class="btn btn-info btn-md" id="myBtn3">Static Modal</button>  <div class="modal fade" id="myModal3" role="dialog"> <div class="modal-dialog">  <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> </code> </pre> </DIV>

编辑
5#
回复此人
一生浮华 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需设置 <code> backdrop </code> 财产到 <code> 'static' </code> 。 </p> <pre> <code> $('#myModal').modal({ backdrop: 'static', keyboard: true }) </code> </pre> <P> 您可能还想设置 <code> keyboard </code> 财产到 <code> false </code> 因为这可以通过按下来阻止模态被关闭 <KBD> 退出 </KBD> 键盘上的键。 </p> <pre> <code> $('#myModal').modal({ backdrop: 'static', keyboard: false }) </code> </pre> <P> <code> myModal </code> 是包含模态内容的div的ID。 </p> </DIV>

编辑
6#
回复此人
NetworkAttachedStorage | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 现在这样做非常容易。只需添加： </p> <pre> <code> data-backdrop="static" data-keyboard="false" </code> </pre> <P> 在你的模态分频器中。 </p> </DIV>

编辑
7#
回复此人
蜡笔小辛 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你想有条件地禁用 <code> backdrop click closing </code> 特征。您可以使用以下行来设置 <code> backdrop </code> 选项 <code> static </code> 在运行时。 </p> <P> 的<strong> Bootstrap v3.xx </强> </p> <pre> <code> jQuery('#MyModal').data('bs.modal').options.backdrop = 'static'; </code> </pre> <P> 的<strong> Bootstrap v2.xx </强> </p> <pre> <code> jQuery('#MyModal').data('modal').options.backdrop = 'static'; </code> </pre> <P> 这将阻止已经实例化的模型 <code> backdrop </code> 选项设置为 <code> false </code> （ <EM> 默认行为 </EM> ），从结束。 </p> </DIV>

编辑
8#
回复此人
林老爷的日常 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 好吧，这是你们中的一些人可能正在寻找的另一种解决方案（因为我......） </p> <P> 我的问题是类似的，模态框正在关闭，而我内部的iframe正在加载，所以我不得不禁用模式解除，直到Iframe完成加载，然后重新启用。 </p> <P> 这里提出的解决方案不是100％工作。 </p> <P> 我的解决方案是： </p> <pre> <code> 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; }); }}; </code> </pre> <P> 所以我暂时阻止Modal关闭： </p> <pre> <code> $modal.on("hide", function (e) { if(is_loading !== true) { e.preventDefault(); return false } }); </code> </pre> <P> 但是，在加载Iframe之后，将重新启用关闭的var is_loading。 </p> </DIV>

编辑
9#
回复此人
布偶的表弟派大星丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您还可以在模态定义中包含这些属性： </p> <pre> <code> <div class="modal hide fade" data-keyboard="false" data-backdrop="static"> </code> </pre> </DIV>

编辑
10#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要在模态显示后更新Bootstrap 4.1.3中的背景状态，我们使用以下行 <a href="https://github.com/JavaTMP/bootstrap-modal-wrapper" rel="nofollow noreferrer"> 引导模态，包装 </A> 插入。 <a href="https://github.com/JavaTMP/bootstrap-modal-wrapper/blob/9bc20ad14e46ca372d9750245538e2c998a184b5/js/bootstrap-modal-wrapper-factory.js#L309" rel="nofollow noreferrer"> 插件存储库代码参考 </A> 。 </p> <pre> <code> $("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static"); </code> </pre> </DIV>

编辑
11#
回复此人
早岁那知世事艰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需添加这两件事 </p> <pre> <code> data-backdrop="static" data-keyboard="false" </code> </pre> <P> 它现在看起来像这样 </p> <pre> <code> <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"> </code> </pre> <P> 它将禁用转义按钮以及任何位置的单击并隐藏。 </p> </DIV>

编辑
12#
回复此人
薄情 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有点像@ AymKdn的答案，但这将允许您更改选项而无需重新初始化模态。 </p> <pre> <code> $('#myModal').data('modal').options.keyboard = false; </code> </pre> <P> 或者如果你需要做多个选项，那就是JavaScript <code> with </code> 在这里派上用场了！ </p> <pre> <code> with ($('#myModal').data("modal").options) { backdrop = 'static'; keyboard = false; } </code> </pre> <P> 如果模态已经打开，这些选项只会生效 <EM> 下次 </EM> 模态打开了。 </p> </DIV>

编辑

登录后才能参与评论