Bootstrap 弹出窗口：打开一个带有 2 个不同链接的弹出窗口

Question

您好（抱歉，如果我的英语不是那么好），

我正在尝试切换相同的弹出窗口，但有 2 个不同的 links。

例如：

第一个 link - 弹出窗口附加到它

2nd link - 1st 可以打开popover link

我试过了:

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>

<div id="popover-content" class="hide">
   test
</div>

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">2nd link (open the popover on the first link)</a>

但它不起作用，它复制了弹出窗口。

有我的 Bootply : http://www.bootply.com/jAGRX9hm1a

谢谢

Answer 1

$(document).ready(function()
{
   var t= $(".pop-contact").popover({
        html: true,
        content: function() {
            return $('#popover-content').html();
        }
    });
  
  var shown=false;
  
t.on('show.bs.popover', function () {
   shown=true;
});
  
  t.on('hide.bs.popover', function () {
   shown=false;
});
  
  
  $('.pop-contact2').click(function(e){
    e.preventDefault();
    if(shown)
    t.popover('hide');
    else
       t.popover('show');     
  });
  
});

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>

<div id="popover-content" class="hide">
   test
</div>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2" type="button"   id="contact">2nd link</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2"   type="button"   id="contact">3nd link</a>

Answer 2

这个其实也是一样的，内容还是1日link显示的。

$(document).ready(function()
{
   var t= $(".pop-contact").popover({
        html: true,
        content: function() {
            return $('#popover-content').html();
        }
    });
  
  var shown=false;
  
t.on('show.bs.popover', function () {
   shown=true;
});
  
  t.on('hide.bs.popover', function () {
   shown=false;
});
  
  
  $('.pop-contact2').click(function(e){
    e.preventDefault();
    if(shown)
    t.popover('hide');
    else
       t.popover('show');     
  });
  
});

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>

<div id="popover-content" class="hide">
   test
</div>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2" type="button"   id="contact">2nd link</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2"   type="button"   id="contact">3nd link</a>

Bootstrap 弹出窗口：打开一个带有 2 个不同链接的弹出窗口

Bootstrap Popover : open one popover with 2 different links

html

javascript

jquery

twitter-bootstrap

bootstrap-popover