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

话虽如此，有办法绕过它。 Bootstrap sets up an event listener从其他所有东西中窃取焦点，这就是阻止你编辑文本输入的原因。其他按钮可以工作，因为它们不需要焦点，只需要点击事件。

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

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

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

Answer 2

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

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

Answer 3

请删除：

REJECTED

这

tabindex="-1"

改为使用这个：

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

Answer 4

请删除：

tabindex="-1"

并将模式的第一行更改为

tabindex=""

这将使焦点集中于输入字段。

Answer 5

*解决

如果有人仍然坚持这个问题，解决方案如下：

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

Answer 6

以下方法可以解决Bootstrap v2.3.2，IE11中的Kendo UI网格版本2013.3.1119.340的此问题。

重点是删除＆＃34;＆＃34;来自莫代尔的班级。无需使用＆＃34; style =＆＃39; display：none;＆＃39;＆＃34;因为它会奇怪地导致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 7

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

Answer 8

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

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

jsfiddle

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

使用Bootstrap版本3.3.2并且上述解决方案均无效。

添加以下CSS可以解决问题

.modal-backdrop {
    position: static; 
}

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

11 个答案: