42

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

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

任何想法 ？

我的代码：

<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…&lt;/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/

4

11 回答 11

55

听起来模态不是解决您的问题的正确方法。

根据定义，模态对话框不应允许用户与其下方的任何内容进行交互。

在用户界面设计中，模态窗口是一个子窗口，需要用户与其交互才能返回操作父应用程序，从而阻止了应用程序主窗口上的工作流。

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

话虽如此，有一种方法可以绕过它。Bootstrap设置了一个事件侦听器以从其他所有内容中窃取焦点，这就是阻止您编辑文本输入的原因。其他按钮之所以起作用，是因为它们不需要焦点，只需要单击事件。

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

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

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

于 2013-02-10T06:18:45.773 回答
47

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

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});
于 2014-02-15T12:17:33.273 回答
15

请删除：

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">
于 2017-04-20T08:26:28.143 回答
5

请删除：

tabindex="-1"

并将模态的第一行更改为

tabindex=""

这将使焦点能够输入字段。

于 2020-01-28T11:59:41.520 回答
4

*解决

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

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

于 2013-11-13T10:26:28.187 回答
1

以下方法可以解决 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');
    });
于 2014-03-28T04:39:28.430 回答
0

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

于 2013-02-10T12:05:31.227 回答
0

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

希望能帮助到你

于 2017-11-29T01:51:03.957 回答
0

以下为我工作：

$('#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();
                }
            });
});
于 2018-06-26T10:45:34.283 回答
0

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

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

jsfiddle

于 2016-05-15T18:30:50.437 回答
-2

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

添加以下CSS就可以了

.modal-backdrop {
    position: static; 
}
于 2015-02-18T06:47:51.693 回答