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

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

其他输入类型（示例中的复选框和按钮）效果很好......

任何想法 ？

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>

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

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

这一切都在 JSFiddle 上...

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

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

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

在用户界面设计中，模态窗口是一个子窗口， 要求用户在返回操作之前与其进行交互 父应用程序，从而阻止了工作流程 应用程序主窗口。

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

话虽这么说，有一种方法可以解决它。引导程序设置事件监听器 https://github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js#L110从其他一切中夺走焦点，这就是阻止您编辑文本输入的原因。其他按钮之所以有效，是因为它们不需要焦点，只需要单击事件。

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

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

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