当点击外部或紧急逃生时，防止引导模式从消失中消失?

I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user presses the finish button. How could I achieve this scenario?

我正在使用Twitter引导模式作为向导窗口，并希望防止用户在模式外单击或按下escape时关闭它。相反，我希望在用户按下finish按钮时关闭它。我如何实现这个场景?

12 个解决方案

#1

629

If using JavaScript then:

如果使用JavaScript,那么:

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

and if HTML:

如果HTML:

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

#2

184

Works too, data-backdrop="static" to click out and data-keyboard="false" to Esc in your div modal:

也可以，data- background ="static" to click out and data-keyboard="false" to Esc in your div modal:

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

#3

Just add data-backdrop="static" and data-keyboard="false" attributes to that modal.

只需将data- background ="static"和data-keyboard="false"属性添加到该模式中。

Eg.

如。

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

#4

You can use the code below

您可以使用下面的代码

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

to change the default behavior.

更改默认行为。

#5

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

#6

I use these attributes and it works, data-keyboard="false" data-backdrop="static"

我使用这些属性，它可以工作，data-keyboard="false" data- background ="static"

#7

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

#8

You can Use Direct in bootstrap model also.

您也可以直接使用bootstrap模型。

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">

#9

If you need disable clicking outside but enable pressing escape

如果您需要禁用点击外部，但启用紧急逃生。

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

#10

The following script worked for me:

下面的脚本对我有用:

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

#11

Your code is working when i click out side the modal, but if i use html input field inside modal-body then focus your cursor on that input then press esc key the modal has closed. Click here

当我在模式栏外点击时，你的代码可以正常工作，但是如果我在modal-body内使用html输入栏，然后把你的光标放在输入栏上，然后按esc键，模式栏就关闭了。点击这里

#12

<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 -->

i think this codepen can help you prevent modal close css and bootstrap

我认为这个代码页可以帮助您防止模式关闭css和引导

#1

629