twitter-bootstrap – Twitter Bootstrap模式阻止文本输入字段

我试图使用模态作为弹出帮助窗口。
我把背景设置为“没有”。
当打开模态(无背景)时，无法对“原始”页面中的输入字段进行聚焦。

其他输入类型(例如复选框和按钮)工作得很好…

任何想法 ？

我的代码：

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

解决方法

这听起来像一个模态不是你的问题在这里的正确解决方案。

定义的模态对话框不应该允许用户与它下面的任何东西进行交互。

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.

– 07000

话虽如此，有一种方法来绕过它。 Bootstrap sets up an event listener把焦点从其他一切，这就是阻止你编辑文本输入。其他按钮工作，因为他们不需要焦点，只有一个点击事件。

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

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

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

原文地址：https://www.jb51.cc/bootstrap/234445.html