Question

我已经制作了jsFiddle，我在图标上使用了twitter bootstrap popover函数。

<div style="margin-top:200px">
    <ul>
        <li class="in-row">
            <a href="#" id="meddelanden" data-title="Meddelanden" data-toggle="clickover" 
            data-placement="right"><i class="icon-globe"></i></a>
        </li>
    </ul>
</div>

jquery的：

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<button id="close-popover" class="btn btn-small btn-primary pull-right">Close please!</button>';

$('#meddelanden').popover({animation:true, content:elem, html:true});

我似乎无法使用其中的按钮关闭弹出窗口。我已经尝试在id“close-popover”上创建一个jquery click函数，但是注意到了。（我没有把我在jsfiddle中关闭它的尝试包括在内）

有关如何使用弹出框内的按钮关闭弹出窗口的任何建议吗？

此致比尔

Answer 1

试试这个： - http://jsfiddle.net/6hkkk/

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$(&quot;#meddelanden&quot;).popover(&quot;hide&quot;);">Close please!</button>';



$('#meddelanden').popover({animation:true, content:elem, html:true});

Answer 2

如果只是一点点onclick：

<button onclick="$('#meddelanden').popover('hide');" class="btn btn-small btn-primary pull-right">Close please!</button>

或者功能怎么样：

<button onclick="close_please();" class="btn btn-small btn-primary pull-right">Close please!</button>

...与

function close_please() {
    $('#meddelanden').popover('hide');
}

或者在创建按钮后如何绑定按钮。

$('#meddelanden').popover({animation:true, content:elem, html:true});
$('#close-popover').bind('click', function(){
    $('#meddelanden').popover('hide');
});

Answer 3

以前的示例有两个主要缺点：

“关闭”按钮需要以某种方式，知道引用元素的ID。
需要添加'shown.bs.popover'事件，关闭按钮的'click'监听器;这也不是一个好的解决方案，因为每次显示'popover'时你都会添加这样的监听器。

以下是一个没有这些缺点的解决方案。

默认情况下，'popover'元素紧接在DOM中的referenced-element之后插入（然后注意引用的元素和popover是直接的兄弟元素）。因此，当单击“关闭”按钮时，您可以简单地查找其最接近的“div.popover”父级，然后查找此父级的前一个兄弟元素。

只需在'关闭按钮的'onclick'处理程序中添加以下代码：

$(this).closest('div.popover').prev().popover('hide');

示例：

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').prev().popover(\'hide\');" type="button" class="close" aria-hidden="true">×</button>'; $loginForm.popover({ placement: 'auto left', trigger: 'manual', html: true, title: 'Alert' + genericCloseBtnHtml, content: 'invalid email and/or password' });

Answer 4

试试这个：

<input type="button" onclick="$(this).parent().hide();" value="close">

通过传递$（this）引用按钮，父对象引用按钮所在的元素

Answer 5

将它放在标题popover构造函数中......

'<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text'

...得到一个小红色＆＃39; x＆＃39;右上角的按钮

//$('[data-toggle=popover]').popover({title:that string here})

我给出相同的答案https://stackoverflow.com/a/23556160/3603692 我希望这是允许的。

Answer 6

替代方案没有在点击时调用函数：

的Javascript

var $popoverParent = $('.popover-parent').popover();

//allow to close when close button clicked
//register listener before popover shown
$popoverParent.on('shown.bs.popover', function()
{
    //get the actual shown popover
    var $popover = $(this).data('bs.popover').tip();

    //find the close button
    var $closeButton = $popover.find('.close-btn');

    $closeButton.click(function(){
        $popoverParent.popover('hide');
    });
});

//show your popover
$popoverParent.popover('show');

Answer 7

我的网站上有很多弹出窗口，它们都有相同的自定义标题栏，所以它们都有相同的关闭按钮。因此，我无法将ID传递给onclick处理程序。相反，我决定搜索打开的popover（一次只能打开一个），然后关闭它。

function closeMe() {
  $( document ).find('.popoverIsOpen').popover( 'hide' );
}

如何用弹出窗口内的按钮关闭bootstrap-popover？

7 个答案: