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

话虽这么说,有办法解决它.Bootstrap 设置一个事件监听器来窃取其他所有内容的焦点,这就是阻止你编辑文本输入的原因.其他按钮可以工作,因为它们不需要焦点,只需要点击事件.

您可以侦听引导模式触发的"显示"事件,并禁用它设置的焦点侦听器.

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

请删除:

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 4

请删除：

tabindex="-1"

并将模态的第一行更改为

tabindex=""

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