Question

我很难让这个工作起来。我有一个链接打开一个包含链接的jQuery UI对话框。这些链接打开一个包含输入字段的Bootstrap popover。由于某种原因，输入字段不可编辑。

请参阅：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"

你的popover上的

。与此同时，ui-widget-overlay和ui-front完全覆盖了正文区域，防止点击和键盘事件从正文“发送”到弹出窗口。

更改为

data-container=".ui-front"

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

Answer 2

在我的情况下改变data-container =＆＃34; body＆＃34;到.ui-front没有帮助！但方向是正确的我得到模态体容器选择器并使用它们！

容器：＆＃39; #myModal-2＆gt;部分＆gt; div.modal-dialog＆gt; DIV＆＃39;，

尝试解释：如果你使用container =＆＃39; body＆＃39;并使用模态然后模态叠加阻止对身体元素的关注

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

2 个答案: