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

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

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

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

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

话虽如此，有一种方法可以解决这个问题。 Bootstrap sets up an event listener从其他一切中夺走焦点，这就是阻止您编辑文本输入的原因。其他按钮之所以有效，是因为它们不需要焦点，只需要单击事件。

您可以监听 Bootstrap 模式触发的“shown”事件，并禁用它设置的焦点监听器。

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

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