Twitter的引导模式块文本输入字段(Twitter Bootstrap modal blocks

我试图用一个模式作为一个弹出帮助窗口。 我设置的背景，“无”。 当模式被打开（无背景）的“原始”页面输入字段不能集中。

其他输入类型（复选框和按钮的例子中）很好地工作...

任何的想法 ？

我的代码：

<div class="container">
<!-- Button to trigger modal -->
  <form>
      <label>Input</label>
      <input type="text" placeholder="Type something…">
      <label class="checkbox">
        <input type="checkbox">Checkbox
      </label>
      <button type="submit" class="btn">Submit</button>
  </form>

  <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a>

  <!-- Modal -->
  <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…</p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

简单的JavaScript，使弹出可拖动：

$('#myModal').draggable();

所有这一切都在的jsfiddle ...

http://jsfiddle.net/Jxdd8/3/

Answer 1:

这听起来像一个模式是不是你的问题的解决方案在这里。

通过定义模式对话框不应允许用户与它下面的任何互动。

在用户界面设计，模态窗口是一个子窗口，要求用户与它进行交互，才可以返回到操作父应用程序，从而防止应用程序主窗口上的工作流程。

- http://en.wikipedia.org/wiki/Modal_window

话虽这么说，是有办法来解决它。 引导设置了一个事件侦听窃取焦点从一切，这是什么阻止你编辑的文本输入。 其他按钮的工作，因为它们不需要对焦，只有一个点击事件。

你可以听的“显示”事件的引导模式触发器和禁用焦点监听它集。

$('#myModal').on('shown', function() {
    $(document).off('focusin.modal');
});

而只是为了好玩： http://jsfiddle.net/Jxdd8/4/

Answer 2:

请记住，埃里克·弗里兹答案不再是有效的，如果你使用Twitter的引导3 - 事件名称发生了变化，因此使用下面的代码来代替：

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

Answer 3:

请删除：

tabindex="-1"

从

<div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

用这个来代替：

<div id="myModal" class="modal hide" data-backdrop="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Answer 4:

*解决

在活动的任何人仍然停留在这个问题上的解决方案如下：

在div类后<div class="modal fade" ：插入style="display:none;" 这将阻塞等领域停止模式，它应该解决这个问题。

Answer 5:

以下方法可以解决此问题的引导V2.3.2，剑道UI电网版本2013.3.1119.340在IE11。

关键是从模式的类别中删除“中”级。 没必要用“的风格=‘显示：无;’”，因为它会导致电网剑道UI奇怪。

HTML代码之前固定的：

  <div class="modal hide fade in" id="YourWindow" role="dialog">

HTML代码固定后：

  <div class="modal hide fade" id="YourWindow" role="dialog">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            
       </div>
       <div class="modal-body" >
          <div id="YourWindowBody">
          </div>
       </div>
       <div class="modal-footer">
          <button type="button" data-dismiss="modal">Close</button>      
       </div>
  </div>

同时，添加下面的JavaScript的行：

    $("#YourWindow").on('shown', function () {
        $(document).off('focusin.modal');
    });

Answer 6:

埃里克·弗里兹说，“通过定义一个模式对话框不应该允许用户与它下面的任何互动。” 我猜你在找什么可以在酥料饼，其中有允许HTML内容的选项中找到http://twitter.github.com/bootstrap/javascript.html#popovers

Answer 7:

使用的所有JavaScript代码的代码结束：

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

的jsfiddle

Answer 8:

对我来说，问题是，我是使用jQuery 3.2.1，所以我将其更改为2.1.3这是以前的应用程序使用，我们有发展，一切工作正常。 可能是一些与jQuery和引导兼容的版本。

希望能帮助到你

Answer 9:

以下为我工作：

$('#myModal').on("show.bs.modal", (ev) => {
    $('#myModal').find(".modal-content").on("mousedown", (e) => {

                if ($(e.target).is("input")) {
                    //Fix for bootstrap modal being stealing focus from inputs like textbox
                    e.stopImmediatePropagation();
                }
            });
});

Answer 10:

使用引导3.3.2版本，并没有上述溶液的工作。

添加下面的CSS的伎俩

.modal-backdrop {
    position: static; 
}

文章来源: Twitter Bootstrap modal blocks text input field