11

我做了一个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 中关闭它）

关于如何使用弹出框内的按钮关闭弹出框的任何建议？

问候，比尔

4

7 回答 7

10

试试这个：- 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});
于 2013-04-26T00:48:38.630 回答
3

稍微点击一下怎么样：

<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');
});
于 2013-04-26T00:18:40.477 回答
2

前面的例子有两个主要缺点：

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

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

默认情况下，'popover' 元素会立即插入到 DOM 中的引用元素之后（然后请注意，引用元素和弹出框是直接兄弟元素）。因此，当单击“关闭”按钮时，您可以简单地查找其最近的“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">&times;</button>';

$loginForm.popover({
    placement: 'auto left',
    trigger: 'manual',
    html: true,
    title: 'Alert' + genericCloseBtnHtml,
    content: 'invalid email and/or password'
});
于 2014-06-09T00:38:13.067 回答
0

尝试这个：

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

通过传递 $(this) 您引用按钮和父引用按钮所在的元素

于 2013-04-25T23:48:55.580 回答
0

如果弹出框不知道引用元素的 ID，或者如果它直接位于主体下方，则可以使用 aria- describeby。

$('#close-popover').click(function () {
  var id = $(this).closest('.popover').attr('id');
  var toggler = $('*[aria-describedby="' + id + '"]');
  toggler.popover('hide');
});

于 2022-01-10T22:41:36.890 回答
0

单击时不调用函数的替代方法：

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');
于 2015-12-14T21:28:36.057 回答
-1

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

function closeMe() {
  $( document ).find('.popoverIsOpen').popover( 'hide' );
}
于 2016-05-19T19:44:29.177 回答