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

时间：2012-11-16 08:40:07

标签： jquery twitter-bootstrap popover

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>

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

有人遇到过这个问题吗？

26 个答案:

答案 0 :(得分：82)

你需要使标记正确

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

答案 1 :(得分：32)

我需要找到适合多个弹出窗口和Bootstrap 3的东西。

这就是我的所作所为：

我有多个想要弹出窗口工作的元素，所以我不想使用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>

popover中保存和关闭按钮的内容：

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

当容器贴在“body”上时

然后，使用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');
    });
});

答案 2 :(得分：26)

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

答案 3 :(得分：16)

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

  1. ＆＃39;关闭＆＃39;按钮需要以某种方式，以了解被引用元素的ID。
  2. 需要添加＆quot; shown.bs.popover＆＃39;活动，点击＆＃39;听取关闭按钮;这也不是一个好的解决方案，因为你会在每次“弹出”时添加这样的听众。显示。

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

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

    只需在＆＃39; onclick＆＃39;中添加以下代码即可＆＃39;关闭按钮的处理程序：

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

答案 4 :(得分：13)

enter image description here

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

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

      });

答案 5 :(得分：9)

我已经检查了很多提到的代码示例，对我而言，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>

答案 6 :(得分：5)

诀窍是使用 .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');
    });
});

答案 7 :(得分：4)

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

HTML：

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

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

答案 8 :(得分：4)

我对这个问题很困难，这是最简单的方法，3行js：

  1. 在popover的标题中添加一个叉号
  2. 使用js代码段显示弹出窗口并单击标题
    3. 关闭
  3. 使用一点css使其好看

    4. enter image description here

    ＆＃13;
    ＆＃13; 
    $(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');
  });
});
    ＆＃13; 
    @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; 
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 9 :(得分：4)

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

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

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：

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

/* 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;
}

答案 10 :(得分：3)

试试这个：

$(function(){
  $("#example")
      .popover({
      title : 'tile',
      content : 'test'
    })
    .on('shown', function(e){
      var popover =  $(this).data('popover'),
        $tip = popover.tip();

      var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>')
        .click(function(){
          popover.hide();
        });
      $('.popover-title', $tip).append(close);
    });
});

不是将按钮添加为标记字符串，如果你有一个jQuery包装按钮，它会更容易，因为你可以更加整齐地绑定。 Bootstrap代码确实遗漏了这一点，但这种解决方法对我有用，实际上可以根据需要扩展应用于所有弹出窗口。

答案 11 :(得分：1)

FWIW，这是我正在使用的通用解决方案。我正在使用Bootstrap 3，但我认为一般的方法也适用于Bootstrap 2。

该解决方案支持弹出窗口，并使用通用的JS代码块为'rel =“popover”'标记标识的所有弹出窗口添加“关闭”按钮。除了（标准）要求有一个rel =“popover”标签，你可以在页面上放置任意数量的弹出窗口，而你不需要知道他们的ID - 事实上他们不需要ID一点都不您需要使用“数据标题”HTML标记格式来设置弹出窗口的title属性，并将data-html设置为“true”。

我发现必要的技巧是构建一个对popover对象（“po_map”）的引用的索引映射。然后我可以通过HTML添加一个'onclick'处理程序，它通过JQuery为我提供的索引引用popover对象（“p_list ['+ index +']。popover（\'toggle \'）”）。这样我就不用担心popover对象的id了，因为我有一个使用JQuery提供的唯一索引的对象本身的引用映射。

这是javascript：

var po_map = new Object();
function enablePopovers() {
  $("[rel='popover']").each(function(index) {
    var po=$(this);
    po_map[index]=po;
    po.attr("data-title",po.attr("data-title")+
    '<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map['+index+'].popover(\'toggle\')">&times;</button>');
    po.popover({});
  });
}
$(document).ready(function() { enablePopovers() });

这个解决方案让我可以轻松地在我网站上的所有弹出窗口上设置一个关闭按钮。

答案 12 :(得分：1)

    $('.tree span').each(function () {
        var $popOverThis = $(this);
        $popOverThis.popover({
            trigger: 'click',
            container: 'body',
            placement: 'right',
            title: $popOverThis.html() + '<button type="button" id="close" class="close" ">&times;</button>',
            html: true,
            content: $popOverThis.parent().children("div.chmurka").eq(0).html()
        }).on('shown.bs.popover', function (e) {
            var $element = $(this);
            $("#close").click(function () {
                $element.trigger("click");
            });
        });
    });

当您点击元素并显示您的弹出窗口时，接下来您可以举起show.bs.popover事件，其中您将获得元素，其中触发器点击以关闭您的弹出窗口

答案 13 :(得分：1)

$popover = $el.popover({
  html: true
  placement: 'left'
  content: 'Do you want to a <b>review</b>? <a href="#" onclick="">Yes</a> <a href="#">No</a>'
  trigger: 'manual'
  container: $container // to contain the popup code
});

$popover.on('shown', function() {
  $container.find('.popover-content a').click( function() {
    $popover.popover('destroy')
  });
});

$popover.popover('show')'

答案 14 :(得分：1)

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

  $(document).on('click', '#close', function (evente) {
    $("#example").popover('hide');
  });
  $("#close").click(function(event) {
    $("#example").popover('hide');
  });
});

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

答案 15 :(得分：1)

我发现下面的代码非常有用（取自https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/）：

$('[data-toggle="popover"]').popover({
  title: function(){
    return $(this).data('title')+'<span class="close" style="margin-top: -5px">&times;</span>';
  }
}).on('shown.bs.popover', function(e){
  var popover = $(this);
  $(this).parent().find('div.popover .close').on('click', function(e){
    popover.popover('hide');
  });
});

答案 16 :(得分：1)

这是一个“作弊”解决方案：

Follow the usual directions for a dismissable popup.

然后使用CSS在框中打一个'X'。

<强> CSS： 

  GlueConfigurationLambda:
    Type: AWS::Lambda::Function
    Properties:
      Description: Adjusts Glue Configuration property.
      FunctionName: GlueConfiguration
      Handler: index.handler
      Role: !GetAtt GlueConfigurationRole.Arn
      Code:
        ZipFile: |
          const response = require("cfn-response");
          const AWS = require("aws-sdk");
          const glue = new AWS.Glue();
          exports.handler = function (event, context) {
            console.log("Request received:\n", JSON.stringify(event));
            let physicalResourceId = event.ResourceProperties.CrawlerName;
            const respond = (e) => response.send(event, context, e ? response.FAILED : response.SUCCESS, e ? e : {}, physicalResourceId);
            process.on('uncaughtException', e=>respond(e));
            try {
              let configuration = (event.RequestType === 'Create' || event.RequestType === 'Update') ?
                event.ResourceProperties.Configuration :
                {};
              if (configuration.Version) {
                configuration.Version = parseFloat(configuration.Version);
              }
              glue.updateCrawler({
                Name: physicalResourceId,
                Configuration: JSON.stringify(configuration)
              }).promise()
                .then(data=>respond())
                .catch(e=>respond(e));
            } catch (e) { respond(e); }
          };
      Timeout: 30
      Runtime: nodejs6.10
  GlueConfigurationRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: '2012-10-17'
        Statement:
        - Effect: Allow
          Principal: {Service: [lambda.amazonaws.com]}
          Action: ['sts:AssumeRole']
      Path: /
      ManagedPolicyArns:
      - "arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole"
      Policies:
      - PolicyName: GluePolicy
        PolicyDocument:
          Version: '2012-10-17'
          Statement:
            - Effect: Allow
              Action:
                - 'glue:UpdateCrawler'
              Resource: '*'
  CrawlerConfiguration:
    Type: Custom::CrawlerConfiguration
    Properties:
      ServiceToken: !GetAtt GlueConfigurationLambda.Arn
      CrawlerName: !Ref Crawler
      Configuration:
        Version: '1.0'
        CrawlerOutput:
          Partitions:
            AddOrUpdateBehavior: InheritFromTable

<强> JQUERY： 

.popover-header::after {
    content: "X";
    position: absolute;
    top: 1ex;
    right: 1ex;
}

<强> HTML： 

$('.popover-dismiss').popover({
    trigger: 'focus'
});

从技术上讲，如果有人点击“X”以外的其他内容，这会使其无法解决，但至少在我的方案中这不是问题。

答案 17 :(得分：0)

将它放在标题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'

...在右上角获得一个小的红色'x'按钮

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

答案 18 :(得分：0)

粘滞在悬停上，HTML：

<a href="javascript:;" data-toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Lorem Ipsum">...</a>

使用Javascript：

$('[data-toggle=popover]').hover(function(e) {
  if( !$(".popover").is(':visible') ) {
      var el = this;
      $(el).popover('show');
      $(".popover > h3").append('<span class="close icon icon-remove"></span>')
                        .find('.close').on('click', function(e) {
                            e.preventDefault();
                            $(el).popover('hide');
                        }
      );
  }
});

答案 19 :(得分：0)

对于仍然有点困惑的人：

以下是切换弹出窗口后如何切换弹出窗口，选择用于触发弹出窗口的相同按钮并在其上调用.popover（＆＃39;切换＆＃39;）。

在这种情况下，为了关闭popover，代码将是：

$（＆＃39;＃示例＆＃39）。酥料饼（＆＃39;肘节＆＃39）;

答案 20 :(得分：0)

作为一个非常简单的解决方案，我做了以下几点：

1）添加以下CSS：

.sub_step_info .popover::after {
    content:url('/images/cross.png');
    position:absolute;
    display:inline-block;
    top:15px;
    right:5px;
    width:15px;
    text-align:center;
    cursor:pointer;
}

2）在弹出式触发器元素

上设置data-trigger="manual"

3）然后基于https://github.com/twbs/bootstrap/issues/16802：

$('[data-trigger="manual"]').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

这使用的基础是弹出窗口上的任何位置都是可点击的，但通过专注于十字架，您将鼓励您追求的行为。

答案 21 :(得分：0)

对我来说，这是在弹出窗口中添加关闭按钮的最简单解决方案。

HTML： 

    <button type="button" id="popover" class="btn btn-primary" data-toggle="popover" title="POpover" data-html="true">
                    Show popover
    </button>

    <div id="popover-content" style="display:none"> 
       <!--Your content-->
       <button type="submit" class="btn btn-outline-primary" id="create_btn">Create</button>
       <button type="button" class="btn btn-outline-primary" id="close_popover">Cancel</button>  
    </div>

Javascript： 

    document.addEventListener("click",function(e){
        // Close the popover 
        if (e.target.id == "close_popover"){
                $("[data-toggle=popover]").popover('hide');
            }
    });

答案 22 :(得分：0)

单击关闭按钮时，我遇到了工具提示做一些时髦事情的问题。要解决此问题，我使用了span而不是按钮。另外，当单击关闭按钮时，我必须在工具提示关闭后单击两次以使其再次打开。要解决此问题，我仅使用了.click()方法，如下所示。

<span tabindex='0' class='tooltip-close close'>×</span> 

$('#myTooltip').tooltip({
    html: true,
    title: "Hello From Tooltip",
    trigger: 'click'
});    

$("body").on("click", ".tooltip-close", function (e) {
    else {
        $('.tooltip').remove();
        $('#postal-premium-tooltip').click();
    }
});

答案 23 :(得分：0)

这是基于上面@Chris答案的有效解决方案，但已解决，因此在触发元素的子序列单击后，您无需两次单击该元素。

如注释中所述，手动使用.popover('hide)会破坏引导程序的内部状态。

var closePopover = function(eventShown) {
   // Set the reference to the calling element
   var $caller = $('#' + this.id);

   // Set the reference to the popover
   var $popover = $('#' + $(eventShown.target).attr('aria-describedby'));

       // Unbind any pre-existing event handlers to prevent duplicate clicks
       $popover.find('.popover-close').off('click');

       // Bind event handler to close button
       $popover.find('.popover-close').on('click', function(e) {

          // Trigger a click on the calling element, to maintain bootstrap's internal state
          $caller.trigger('click');
        });
 }

$('.popoverTriggerElement').popover({
   trigger: 'click'
})
.on('shown.bs.popover', closePopover)

现在，您可以使用关闭按钮，而不必复制单击事件，并且可以检查引导程序的内部状态，以使其按预期工作。

答案 24 :(得分：0)

对于特定的弹出框，您可以在关闭按钮上添加一个 onclick 事件：

onclick="$('#my-popover').popover('hide');

答案 25 :(得分：-2)

<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>
相关问题
最新问题