Twitter Bootstrap 模式阻止文本输入字段

Question

我正在尝试使用模式作为弹出帮助窗口。 我将背景设置为“无”。 当模式打开（没有背景）时，“原始”页面中的输入字段无法聚焦。

其他输入类型（示例中的复选框和按钮）运行良好...

有什么想法吗？

我的代码：

<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

话虽如此，有一种方法可以绕过它。引导sets up an event listener 以从其他所有内容中窃取焦点，这就是阻止您编辑文本输入的原因。其他按钮之所以有效，是因为它们不需要焦点，只需要一个点击事件。

您可以侦听引导模式触发的“显示”事件，并禁用它设置的焦点侦听器。

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

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

Answer 2

正如 Eric Freese 所说，“根据定义，模态对话框不应允许用户与其下方的任何内容进行交互。” 我猜你要找的可以在 Popover 中找到，它可以选择允许 html 内容http://twitter.github.com/bootstrap/javascript.html#popovers

Answer 3

*已解决

如果有人仍然卡在这个问题上，解决方案如下：

在 div 类 <div class="modal fade" 之后插入：style="display:none;" 这将阻止模式阻塞字段，它应该可以解决问题。

Answer 4

请记住，如果您使用 Twitter Bootstrap 3，Eric Freese 的回答将不再有效 - 事件名称已更改，因此请改用以下代码：

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

Answer 5

以下方法可以解决IE11中Bootstrap v2.3.2、Kendo UI Grid 2013.3.1119.340版本的这个问题。

关键是从模态的类中删除类“in”。不需要使用 "style='display:none;'" 因为它会导致 Kendo Grid 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

使用 Bootstrap 3.3.2 版，上述解决方案均无效。

添加以下 CSS 就可以了

.modal-backdrop {
    position: static; 
}

Answer 7

使用此代码结束所有 javascript 代码：

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

jsfiddle

Answer 8

请删除：

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 9

对我来说，问题是我使用的是 jquery 3.2.1，所以我将其更改为 2.1.3，它在我们开发的以前的应用程序中使用，一切正常。可能与 jquery 和 bootstrap 兼容版本有关。

希望对你有帮助

Answer 10

以下对我有用：

$('#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 11

请删除：

tabindex="-1"

并将模态框的第一行更改为

tabindex=""

这将启用输入字段的焦点。