无法将 Input 元素集中在 jQuery UI 对话框中的 Bootstrap Popover 中

Question

我很难让它发挥作用。我有一个链接可以打开一个包含链接的 jQuery UI 对话框。这些链接会打开一个包含输入字段的 Bootstrap 弹出窗口。由于某种原因，输入字段不可编辑。

参见：http://www.bootply.com/Z46ZXA133U

标记：

<div id="dialog">
  <a data-placement="bottom" data-toggle="popover" data-title="Login" data-container=".ui-front" type="button" data-html="true" href="#" id="login">Login</a>
</div>
<form id="popover-content" style="display:none">
  <input type="text" value="try changing me">
</form>

剧本：

$( "#dialog" ).dialog({
    height: 300,
    width: 350,
    modal: true,
});
$("[data-toggle=popover]").popover({
    html: true, 
    content: function() {
        return $('#popover-content').html();
    }
});

Answer 1

这是因为你有

data-container="body" 

在你的弹出窗口上。同时，

ui-widget-overlay

和

ui-front

完全覆盖主体区域，防止点击和键盘事件从主体“发送”到弹出窗口。

改为

data-container=".ui-front"

你很好。分叉的 bootply -> http://www.bootply.com/AXpc6PKuSO

Answer 2

在我的案例中，将 data-container="body" 更改为 .ui-front 没有帮助！ 但是方向是对的 我得到模态主体容器选择器并使用它们！

container: '#myModal-2 > section > div.modal-dialog > div',

尝试解释一下：如果您使用 container='body' 并使用模态，那么模态覆盖会阻止对主体元素的关注

Answer 3

我通过从模态 div 中删除

tabindex="-1"

来解决这个问题