无法在引导模式内的 qtip 内集中输入答案

【问题标题】：Can't focus input inside qtip inside bootstrap modal无法在引导模式内的 qtip 内集中输入
【发布时间】：2016-12-27 20:46:03
【问题描述】：

我在引导模式中有一个按钮，它通过 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>

【问题讨论】：

你解决了吗？升级到 jqueryui 1.11 和 jquery 2.1 后我遇到了完全相同的问题
我一直没弄明白。

标签： html angularjs angular-ui-bootstrap qtip2

【解决方案1】：

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

【讨论】：

或者也可以增加元素的z-index

【解决方案2】：

你可以试试这个

$('#myModal').on('hidden.bs.modal', function () {
    $('#qtip-content').find('input').focus();
});

【讨论】：