jquery-ui - 无法将输入元素聚焦在 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"

你很好。 fork bootply -> http://www.bootply.com/AXpc6PKuSO