jQuery 如何在弹出窗口中插入关闭按钮以进行引导

How to insert close button in popover for bootstrap

提问by Danglebz Highbreed

JS:

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:

HTML：

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

i'm write your code isn't show your popup.

我正在写你的代码没有显示你的弹出窗口。

anyone come across this problem?

有人遇到过这个问题吗？

回答by davidkonrad

You need to make the markup right

您需要正确标记

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

Then, one way is to attach the close-handler inside the element itself, the following works :

然后，一种方法是将 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'
    });
});  

回答by Chris

I needed to find something that would work for multiple popovers and in Bootstrap 3.

我需要找到适用于多个弹出框和 Bootstrap 3 的东西。

Here's what I did:

这是我所做的：

I had multiple elements I wanted to have a popover work for, so I didn't want to use ids.

我有多个元素想要使用 popover 工作，所以我不想使用 id。

The markup could be:

标记可能是：

<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>

The content for the save and close buttons inside the popover:

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

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

and the javascript for all 3 buttons:

以及所有 3 个按钮的 javascript：

This method works when the container is the default not attached to body.

当容器是默认的不附加到主体时，此方法有效。

$('.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');
    });
});

When the container is attached to 'body'

当容器附加到“身体”时

Then, use the aria-describedby to find the popup and hide it.

然后，使用 aria-scribedby 找到弹出窗口并将其隐藏。

$('.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');
    });
});

回答by youen

I found other answers were either not generic enough, or too complicated. Here is a simple one that should always work (for bootstrap 3):

我发现其他答案要么不够通用，要么太复杂。这是一个应该始终有效的简单方法（对于引导程序 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');
        });
    });
});

Then just add attribute data-dismiss="popover"in your close button. Also make sure not to use popover('hide')elsewhere in your code as it hides the popup but doesn't properly sets its internal state in bootstrap code, which will cause issues next time you use popover('toggle').

然后只需data-dismiss="popover"在关闭按钮中添加属性。还要确保不要popover('hide')在代码中的其他地方使用，因为它隐藏了弹出窗口，但没有在引导代码中正确设置其内部状态，这将在您下次使用popover('toggle').

回答by user2957865

Previous examples have two main drawbacks:

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

1. The 'close' button needs in some way, to be aware of the ID of the referenced-element.
2. The need of adding on the 'shown.bs.popover' event, a 'click' listener to the close button; which is also not a good solution because of, you would then be adding such listener each time the 'popover' is shown.

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

Below is a solution which has not such drawbacks.

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

By the default, the 'popover' element is inserted immediately after the referenced-element in the DOM (then notice the referenced-element and the popover are immediate sibling elements). Thus, when the 'close' button is clicked, you can simply look for its closest 'div.popover' parent, and then look for the immediately preceding sibling element of such parent.

默认情况下，'popover' 元素立即插入到 DOM 中被引用元素之后（然后注意被引用元素和 popover 是直接同级元素）。因此，当单击“关闭”按钮时，您可以简单地查找其最近的“div.popover”父元素，然后查找该父元素的紧接其前面的同级元素。

Just add the following code in the 'onclick' handler of the 'close button:

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

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

Example:

例子：

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'
});

回答by chunguiw

The following is what i just used in my project .And hope it can help you

以下是我刚刚在我的项目中使用的。希望它可以帮助你

<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');                
         }

      });

回答by AWolf

I've checked many of the mentioned code examples and for me the approach from Chris is working perfectly. I've added my code here to have a working demo of it.

我已经检查了许多提到的代码示例，对我来说，Chris 的方法运行良好。我已经在这里添加了我的代码，以获得它的工作演示。

I have tested it with Bootstrap 3.3.1 and I haven't tested it with an older version. But it's definitely not working with 2.x because the shown.bs.popoverevent was introduced with 3.x.

我已经用 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>

回答by Bogdanio

The trick is to get the current Popover with .data('bs.popover').tip():

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

$('#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');
    });
});

回答by mistermat

Just wanted to update the answer. As per Swashata Ghosh, the following is a simpler way that worked for moi:

只是想更新答案。根据 Swashata Ghosh，以下是适用于 moi 的更简单的方法：

HTML:

HTML：

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

JS:

JS：

$('.example').popover({
   title: function() {
      return 'Popup title' +
             '<button class="close">&times</button>';
   },
   content: 'Popup content',
   trigger: 'hover',
   html: true
});

$('.popover button.close').click(function() {
   $(this).popover('toggle');
});

回答by juandiegoles

I have struggle with this one and this is the simplest way to do it, 3 lines of js:

我对此很挣扎，这是最简单的方法，3 行 js：

1. Add a cross in the title of the popover
2. use the js snippet to show the popover and to close by clicking the header
3. Use a bit of css to make it nice

1. 在弹出框的标题中添加一个叉号
2. 使用 js 片段显示弹出窗口并通过单击标题关闭
3. 用一点css让它好看

$(document).ready(function() {
  // This is to overwrite the boostrap default and show it allways
  $('#myPopUp').popover('show');
  // This is to destroy the popover when you click the title
  $('.popover-title').click(function(){
    $('#myPopUp').popover('destroy');
  });
});

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";

/* Just to align my example */
.btn {
  margin: 90px auto;
  margin-left: 90px;
}

/* Styles for header */
.popover-title {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-block;
  float: right;
  text-align: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<button id="myPopUp" class="btn btn-success" data-toggle="popover" data-placement="top" data-title="×" data-content="lorem ipsum content">My div or button or something with popover</button>  
 

回答by erik1337

This works with multiple popovers and I also added a little big of extra JS to handle the z-index issues that happen with overlapping popovers:

这适用于多个弹出框，我还添加了一些额外的 JS 来处理重叠弹出框出现的 z-index 问题：

http://jsfiddle.net/erik1337/fvE22/

http://jsfiddle.net/erik1337/fvE22/

JavaScript:

JavaScript：

var $elements = $('.my-popover');
$elements.each(function () {
    var $element = $(this);

    $element.popover({
        html: true,
        placement: 'top',
        container: $('body'), // This is just so the btn-group doesn't get messed up... also makes sorting the z-index issue easier
        content: $('#content').html()
    });

    $element.on('shown.bs.popover', function (e) {
        var popover = $element.data('bs.popover');
        if (typeof popover !== "undefined") {
            var $tip = popover.tip();
            zindex = $tip.css('z-index');

            $tip.find('.close').bind('click', function () {
                popover.hide();
            });

            $tip.mouseover(function (e) {
                $tip.css('z-index', function () {
                    return zindex + 1;
                });
            })
                .mouseout(function () {
                $tip.css('z-index', function () {
                    return zindex;
                });
            });
        }
    });
});

HTML:

HTML：

<div class="container-fluid">
    <div class="well popover-demo col-md-12">
        <div class="page-header">
             <h3 class="page-title">Bootstrap 3.1.1 Popovers with a close button</h3>

        </div>
        <div class="btn-group">
            <button type="button" data-title="Popover One" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Two" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Three (and the last one gets a really long title!)" class="btn btn-primary my-popover">Click me!</button>
        </div>
    </div>
</div>
<div id="content" class="hidden">
    <button type="button" class="close">&times;</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS:

CSS：

/* Make the well behave for the demo */
 .popover-demo {
    margin-top: 5em
}
/* Popover styles */
 .popover .close {
    position:absolute;
    top: 8px;
    right: 10px;
}
.popover-title {
    padding-right: 30px;
}