如何在popover中插入关闭按钮以进行引导

Question

JS:

$(function(){
  $("#example").popover({
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>',
    content : 'test'
  })
  $('html').click(function() {
    $('#close').popover('hide');
  });
});

HTML:

<button type="button" id="example" class="btn btn-primary" ></button>

我写的你的代码不显示你的弹出窗口.

有谁遇到过这个问题？

Answer 1

你需要使标记正确

<button type="button" id="example" class="btn btn-primary">example</button>

然后,一种方法是将close-handler连接到元素本身,以下工作:

$(document).ready(function() {
    $("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span>'+
                '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>',
        content : 'test'
    });
});  

Answer 2

我需要找到适合多个popovers和Bootstrap 3的东西.

这是我做的:

我有多个元素我想要一个popover工作,所以我不想使用id.

标记可能是:

<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>

弹出框内的保存和关闭按钮的内容:

var contentHtml = [
    '<div>',
        '<button class="btn btn-link cancel">Cancel</button>',
        '<button class="btn btn-primary save">Save</button>',
    '</div>'].join('\n');

以及所有3个按钮的javascript:

当容器默认未附加到正文时,此方法有效.

$('.foo').popover({
    title: 'Bar',
    html: true,
    content: contentHtml,
    trigger: 'manual'
}).on('shown.bs.popover', function () {
    var $popup = $(this);
    $(this).next('.popover').find('button.cancel').click(function (e) {
        $popup.popover('hide');
    });
    $(this).next('.popover').find('button.save').click(function (e) {
        $popup.popover('hide');
    });
});

当容器连接到"身体"时

然后,使用aria-describedby找到弹出窗口并隐藏它.

$('.foo').popover({
    title: 'Bar',
    html: true,
    content: contentHtml,
    container: 'body',
    trigger: 'manual'
}).on('shown.bs.popover', function (eventShown) {
    var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
    $popup.find('button.cancel').click(function (e) {
        $popup.popover('hide');
    });
    $popup.find('button.save').click(function (e) {
        $popup.popover('hide');
    });
});

Answer 3

我发现其他答案要么不够通用,要么太复杂.这是一个应该始终有效的简单方法(对于bootstrap 3):

$('[data-toggle="popover"]').each(function () {
    var button = $(this);
    button.popover().on('shown.bs.popover', function() {
        button.data('bs.popover').tip().find('[data-dismiss="popover"]').on('click', function () {
            button.popover('toggle');
        });
    });
});

然后只需data-dismiss="popover"在关闭按钮中添加属性即可.另外,请确保不要popover('hide')在代码中的其他位置使用,因为它隐藏了弹出窗口,但未在引导代码中正确设置其内部状态,这将在下次使用时导致问题popover('toggle').

Answer 4

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

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

以下是没有这些缺点的解决方案.

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

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

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

例:

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').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'
});

Answer 5

以下是我刚刚在我的项目中使用的内容.希望它可以帮到你

<a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true  data-original-title="weclome to use the sql query" data-content="content">example</a>


$('#manualinputlabel').click(function(e) {
              $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>');
              $(this).popover();

          });

      $(document).click(function(e) {
         if(e.target.id=="popovercloseid" )
         {
              $('#manualinputlabel').popover('hide');                
         }

      });

Answer 6

我已经检查了许多提到的代码示例,对我来说,Chris的方法是完美的.我在这里添加了我的代码以获得它的工作演示.

我用Bootstrap 3.3.1测试了它,我还没有用旧版本测试它.但它绝对不能与2.x一起使用,因为shown.bs.popover事件是用3.x引入的.

$(function() {
  
  var createPopover = function (item, title) {
                       
        var $pop = $(item);
        
        $pop.popover({
            placement: 'right',
            title: ( title || '&nbsp;' ) + ' <a class="close" href="#">&times;</a>',
            trigger: 'click',
            html: true,
            content: function () {
                return $('#popup-content').html();
            }
        }).on('shown.bs.popover', function(e) {
            //console.log('shown triggered');
            // 'aria-describedby' is the id of the current popover
            var current_popover = '#' + $(e.target).attr('aria-describedby');
            var $cur_pop = $(current_popover);
          
            $cur_pop.find('.close').click(function(){
                //console.log('close triggered');
                $pop.popover('hide');
            });
          
            $cur_pop.find('.OK').click(function(){
                //console.log('OK triggered');
                $pop.popover('hide');
            });
        });

        return $pop;
    };

  // create popover
  createPopover('#showPopover', 'Demo popover!');

  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button>

<div id="popup-content" class="hide">
    <p>Simple popover with a close button.</p>
    <button class="btn btn-primary OK">OK</button>
</div>

Answer 7

诀窍是使用.data('bs.popover')获取当前的Popover.tip ():

$('#my_trigger').popover().on('shown.bs.popover', function() {
    // Define elements
    var current_trigger=$(this);
    var current_popover=current_trigger.data('bs.popover').tip();

    // Activate close button
    current_popover.find('button.close').click(function() {
        current_trigger.popover('hide');
    });
});

Answer 8

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.popover-1.1.2.js"></script>

<script type="text/javascript">
$(function(){ 
$("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span> <button     type="button" id="close" class="close">&times;</button></span>',
        content : 'test'
    })


$("#close").click(function(event) {

$("#example").popover('hide');
});
});
</script>

<button type="button" id="example" class="btn btn-primary" >click</button>