容器div上的Bootstrap 3弹出框

Question

我正在尝试创建一个弹出框，它会出现在特定的 <div> 旁边，而不是包含弹出框触发器的 <div> 中。

根据 Bootsrap 文档，可以通过设置 'container' 选项来实现此目的。

这是 jsfiddle: jsfiddle 这是我的 html: 点击按钮查看弹出框

<a href="#" id="" class="btn btn-primary"
    data-toggle="popover"
    data-container="#greendiv"
    data-original-title="Title"
    data-content="This is the body of Popover"
    data-placement="right"  >pop
</a>
<div id="reddiv" style='background:red;width:100px;height:100px;'>  
    red div 
</div>
<div id="greendiv" style='background:green;width:100px;height:100px;' >
    green div <br>
    I want popover to appear here to the right: 
</div>

和 js：

$(function () { 
    $("[data-toggle='popover']").popover();   
});

弹出框出现了，但是它出现在触发的div旁边而不是我想要的那个div。有什么想法欢迎提供，为什么这对我不起作用？

- Simon Says

---

https://jsfiddle.net/sv6xd2py/4/ - Simon Says

感谢所有的回复。我试图使用data-*属性来找到一个解决方案，因为这对我的php逻辑更容易。但似乎没有额外的javascript是不可能的？此外，正如Krupesh、JesseEarley和timgvandijk所指出的那样，我显然误解了容器选项。 - Simon Says

Answer 1

据我所知，container的意思是将弹出框附加到特定的元素容器（例如body），因此它会影响页面滚动。这意味着在滚动时，container选项用于设置弹出框的静态或动态位置。

对于您想要的功能，请尝试以下代码。

$(function() {
  $("#test").click(function() {
    $("[data-toggle='popover']").popover('toggle');
  });
});

#greendiv {
    background:green;width:100px;height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" id="test" class="btn btn-primary">pop
</a>
<div id="reddiv" style='background:red;width:100px;height:100px;'>
  red div
</div>
<div id="greendiv" data-toggle="popover" data-original-title="Title" data-content="This is the body of Popover" data-placement="right">
  green div
  <br>I want popover to appear here to the right:
</div>

- Krupesh Kotecha

Answer 2

正确的方法是向您想要添加 popover 的元素添加data-*属性。请参见可工作的jsfiddle。

HTML

<a href="#" id="" data-toggle="popover" class="btn btn-primary">pop</a>

<div id="greendiv"
   data-original-title="Title"
   data-content="This is the body of Popover"
   data-placement="right"
     style='background:green;width:100px;height:100px;' >
    green div <br>
    I want popover to appear here to the right: 
</div>

JavaScript（JavaScript）

$(function () { 
    $("[data-toggle='popover']").on('click', function(e) {
        $('#greendiv').popover('toggle');
    }); 
});

作为替代方案，您可以使用popover()插件的options而不是data-*属性。官方文档将会帮助您http://getbootstrap.com/javascript/#popovers。

- Rashad Ibrahimov

Answer 3

这不是容器属性的作用。要查看容器属性的实际效果，您可以通过this fiddle检查Rowan Freeman。切换两行并上下滚动以查看差异。

为了实现所需的行为，您必须将与弹出窗口相关的数据属性放在#greendiv元素上，并执行类似操作

$(function () { 
    $('.popover-trigger').on('click', function() {
        $('#greendiv').popover('show');
    }); 
});

请参考此代码片段以获取完整示例。

- timgvandijk

Answer 4

我将 click-'toggle' 绑定到按钮上，并在 greendiv 上使用了 popover-settings。这是一个例子：DEMO-JSFIDDLE。

$(function () {
    $("#popThis").on("click", function(){
        $('#greendiv').popover('toggle');
    });

    $('#greendiv').popover({
        title: "Title",
        content: "This is the body of Popover",
        placement:"right",
        trigger: 'manual'
    });
});

- Salmin Skenderovic

Answer 5

从你的“Fiddle”代码来看，弹出框是正常工作的，你误解了“data-container”的作用。如果你查看“Fiddle”代码并查看源代码（我使用的是Firebug），你将会看到，一旦你点击“pop”，弹出框实际上确实附加在#greendiv下面，并被添加到你放置在里面的文本下方。

根据Bootstrap文档：

将弹出框附加到特定元素。例如：container: 'body'。 这个选项非常有用，因为它允许你在文档中的触发元素附近放置弹出框， 这将防止在窗口调整大小期间弹出框漂移离开触发元素。

这并没有说它更改了弹出框的位置。

- JesseEarley