防止引导模式在单击外部或按下转义时消失？

287

我正在使用Twitter Bootstrap模式作为向导窗口，并希望在用户点击模式外或按下转义按钮时阻止用户关闭它。相反，我希望它在用户按下完成按钮时关闭。我怎么能实现这种情况？防止引导模式在单击外部或按下转义时消失？

2013-04-22 Ehsan Zargar Ershadi

重复。这完全回答你的问题：[禁止twitter引导模态窗口从关闭]（http://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing?rq=1） – nickhar 2013-04-22 19:56:22

thx，我找不到它！？ – 2013-04-22 20:09:00

已经提供了解决方案，请访问以下链接： http://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing/25159755#25159755的 – 2014-08-06 12:01:05

587

如果使用JavaScript，那么：

$('#myModal').modal({ 
    backdrop: 'static', 
    keyboard: false 
})

，如果HTML：

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

来源

2013-04-22 20:11:15

+12

当使用JavaScript，你将不得不将键盘设置为false以防止关闭也按ESC。 – 2013-10-08 18:09:22

请注意，列表仍在后台启用 – goto 2015-02-17 16:15:48

html属于触发器吗？或在模态[有modal_id]？ – Omar 2015-11-02 15:19:25

172

工作过，data-backdrop="static"点击并data-keyboard="false"到Esc键在您的DIV模式：

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">

来源

2014-01-07 15:50:04 CesarMiguel

其他建议如果需要以编程方式/运行时进行设置，那么这是正确的，但这是做设计时的正确方法，我认为这是“注意分离”开发人员的最佳方式。 – 2015-08-25 08:02:06

我在一个页面中有两个模态。至少其中一人从来没有工作过。但是这个解决方案解决了它。将它放入模态div本身也是有意义的。 – goodbytes 2015-10-13 07:19:25

这就是所谓的完美答案！ – 2016-08-23 10:14:06

您可以使用下面的代码

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

更改默认行为。

来源

2015-08-19 21:06:23

如果你需要禁用点击之外，但能按Escape

$('#myModal').modal({ 
    backdrop: 'static', // This disable for click outside event 
    keyboard: true  // This for keyboard event 
})

来源

2016-06-04 04:56:07 HoangLong85

你的代码工作当我点击了侧模态，但如果我使用模式，体内HTML input场则集中你的光标然后按esc模式已关闭。点击here

来源

2016-07-13 05:15:34

只需添加data-backdrop="static"和data-keyboard="false"属性，该属性模式。

例如，

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

来源

2016-07-14 12:37:49

jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});

来源

2016-09-01 06:15:01

虽然此代码可能有助于解决问题，但它不能解释_why_和/或_how_它是否回答此问题。提供这种附加背景将显着提高其长期教育价值。请[编辑]您的答案以添加解释，包括适用的限制和假设。 – 2016-09-01 17:18:01

你的答案不适用。您必须在显示模式之前设置选项。 '$（'＃modal'）。modal（{backdrop：'static'，keyboard：false}，'show'）;' – 2017-04-19 14:22:07

<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">

来源

2016-10-26 06:14:18

<div class="modal show"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header">  

    <h4 class="modal-title">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
    </div> 

    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog -->

我认为这codepen可以帮助你 prevent modal close css and bootstrap

来源

2017-01-22 07:36:07

下面的脚本为我工作：

// prevent event when the modal is about to hide 
$('#myModal').on('hide.bs.modal', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false; 
});

来源

2017-07-12 05:03:55 Nabid

你是怎么关闭它的。如果你想在这之后关闭？ – Prateekro 2018-01-18 09:16:32

我使用这些属性和它的工作原理，data-keyboard="false" data-backdrop="static"

来源

2017-10-04 13:04:04

防止引导模式在单击外部或按下转义时消失？

回答

相关问题