引导弹出窗口，关闭按钮

Posted 2023-05-08

【中文标题】引导弹出窗口，关闭按钮

【英文标题】：Bootstrap popover, close button

【发布时间】：2018-01-06 01:45:12

【问题描述】：

我做了以下弹出框： https://jsfiddle.net/ca4h0a0q/

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
 <button class="close">
  x
  </button>
  <div>This is your div content</div> 
</div>

javascript：

$(document).ready(function()
    $("body").on("click",".close",function()
    $(".danger").trigger("click");  
  );

  $('.danger').popover( 
    html : true,
    content: function() 
      return $('#popover_content_wrapper').html();
    
  );
);

为了关闭弹出框，由于这个错误：https://github.com/twbs/bootstrap/issues/16732 我必须在打开它的按钮上触发一个点击事件。我不太喜欢这个解决方案。有更好的方法吗？

【问题讨论】：

检查这个问题，这里提到的弹出窗口有多种方法可以添加关闭按钮，***.com/questions/13413057/…

【参考方案1】：

我是这样工作的。

<div id="popover_content_wrapper" style="display: none">
  <button class="close" onclick="$('.danger').popover('hide').trigger('click')">
    x
  </button>
<div>This is your div content</div> 

还有 js...

$(document).ready(function()
  $('.danger').popover( 
    html : true,
    content: function() 
      return $('#popover_content_wrapper').html();
    
  );
);

【参考方案2】：

我会替换这个

$("body").on("click",".close",function()
    $(".danger").trigger("click");  
);

有了这个

$("body").on("click",".close",function()
    $(this)
        .closest("a.danger")
        .trigger("click");  
);

更多关于closest: http://api.jquery.com/closest/

这样，如果您有 多个 弹出框或具有 danger 类的元素，它们也不会被触发。

【讨论】：

@JoelAlvarezMyrrie 我的回答对您有帮助吗？如果您需要更多帮助，请告诉我

【参考方案3】：

当您知道源元素的 ID（或类或其他要识别的内容）时：

$('#<id>').popover('hide'); 

或

$('#<id>').popover('dispose');

会正常工作。

如果你在创建时添加类popover_show，比如

$(info.jsEvent.srcElement).addClass('popover_show');

您可以使用 .popover_show 类来关闭/处理所有打开的弹出框：

$('.popover_show').popover('dispose'); 

或

$('.popover_show').popover('dispose'); 

删除所有弹出框的粗略方法（如果您遇到问题或想清理）。

$('.popover').remove(); 

（如果你有嵌套的弹出框，manuell 将 DOM 元素添加到弹出框，隐藏元素...）