html - 无法在 bootstrap 模式中将输入集中在 qtip 中

Question

我在引导模式中有一个按钮，它通过 qtip2 显示工具提示。工具提示内部是一个输入元素。模式打开时，我无法让输入成为焦点。

这是我的灵感:http://plnkr.co/edit/dByd0u?p=preview

HTML:

<button data-toggle="modal" data-target="#MyModal">Modal</button>

  <div id="qtip-content" style="display:none;">
    <input type="text" />
  </div>

  <div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h2 class="modal-title" id="myModalLabel">Bootstrap Modal</h2>
          </div>
          <div class="modal-body" ng-init="modalLoad = true">
            <button qtip="">Show qtip</button>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
          </div>
      </div>
    </div>  
</div>

Answer 1

对于仍然对此解决方案感兴趣的任何人，只需从模态 div 中删除 tabindex="-1" 属性即可。这是专门防止关注元素的 hack。