Question

我在bootstrap模式中有一个按钮，通过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”属性即可。这是一个专门防止关注元素的黑客行为。

Answer 2

你可以试试这个

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

无法将输入集中在qtip内部的bootstrap模式中

2 个答案: