twitter-bootstrap Twitter Bootstrap 模式块文本输入字段

Twitter Bootstrap modal blocks text input field

提问by user966737

I am trying to use a modal as a popup help window. I set backdrop to 'nothing'. When the modal is opened (without backdrop) input fields in 'original' page cannot be focused.

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

Other input types (checkbox and button in example) work well...

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

Any idea ?

任何的想法 ？

My code:

我的代码：

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

Simple Javascript to make the popup draggable:

使弹出窗口可拖动的简单 Javascript：

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

All this on JSFiddle...

所有这些都在 JSFiddle 上......

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

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

回答by Eric Freese

It sounds like a modal isn't the right solution to your problem here.

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

A modal dialog by definition shouldn't allow the user to interact with anything below it.

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

In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.

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

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

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

That being said, there is a way to get around it. Bootstrap sets up an event listenerto steal focus from everything else, and that's what's stopping you from editing the text input. The other buttons work because they don't require focus, only a click event.

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

You can listen for the 'shown' event that the bootstrap modal triggers, and disable the focus listener it sets.

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

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

And just for fun: http://jsfiddle.net/Jxdd8/4/

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

回答by animativ

please remember that Eric Freese answer is no longer valid if you're using Twitter Bootstrap 3 - the event name has changed, so use the following code instead:

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

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

回答by oparam

Please remove:

请删除：

tabindex="-1"

from

从

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

Use this one instead:

改用这个：

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

回答by Niall Lonergan

*RESOLVED

*解决

In the event anyone is still stuck on this issue the solution is as follows:

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

After the div class <div class="modal fade"insert: style="display:none;"This will stop the modal from blocking the fields and it should resolve the issue.

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

回答by Blessing Tatenda Kabungaidze

Please remove:

请删除：

tabindex="-1"

and change the first line of the modal to

并将模态的第一行更改为

tabindex=""

This will enable focus to input fields.

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

回答by ChinaHelloWorld

Following way can fix this issue for Bootstrap v2.3.2, Kendo UI Grid version 2013.3.1119.340 in IE11.

以下方法可以在 IE11 中为 Bootstrap v2.3.2、Kendo UI Grid 版本 2013.3.1119.340 解决此问题。

the point is remove class "in" from modal's class. No need to use "style='display:none;'" since it will cause Kendo Grid UI oddly.

重点是从模态的类中删除类“in”。不需要使用 "style='display:none;'" 因为它会导致 Kendo Grid UI 奇怪。

html codes before fixed:

修复前的 html 代码：

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

html codes after fixed:

修复后的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>

same time, add following line of javascript:

同时，添加以下 javascript 行：

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

回答by acubillo

For me the problem was that I was using jquery 3.2.1, so I change it to 2.1.3 which was use on previous app we had develop and everything worked fine. Might be something with jquery and bootstrap compatibility versions.

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

Hope it helps

希望能帮助到你

回答by Faisal Mq

Following worked for me:

以下对我来说有效：

$('#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();
                }
            });
});

回答by mabdrabo

as Eric Freese said, "A modal dialog by definition shouldn't allow the user to interact with anything below it." i guess what you are looking for could be found in the Popover, which has the option to allow html content http://twitter.github.com/bootstrap/javascript.html#popovers

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

回答by Reza Nadimi

use this code end of all javascript code:

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

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

jsfiddle

提琴手