如何在popup窗口中插入closuresbutton以进行引导
JS：
$(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button>', content : 'test' }) $('html').click(function() { $('#close').popover('hide'); }); }); HTML：
<button type="button" id="example" class="btn btn-primary" ></button>
我写你的代码是不显示你的popup窗口。
任何人遇到这个问题？
你需要做好标记
<button type="button" id="example" class="btn btn-primary">example</button>
然后，一种方法是在元素本身附加close处理程序，下面的工作：
$(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="$("#example").popover("hide");">×</button>', content : 'test' }); });
我需要find一些适用于多个弹窗和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>
popup窗口中的保存和closuresbutton的内容：
var contentHtml = [ '<div>', '<button class="btn btn-link cancel">Cancel</button>', '<button class="btn btn-primary save">Save</button>', '</div>'].join('\n');
和所有3个button的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-describeby来查找popup框并隐藏它。
$('.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'); }); });
我发现其他的答案要么不够通用，要么太复杂。 这是一个简单的应该始终工作（引导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'); }); }); });
然后在closuresbutton中添加属性data-dismiss="popover" 。 另外，请确保不要在代码中的其他地方使用popover('hide') ，因为它隐藏了popup窗口，但是没有在引导代码中正确设置其内部状态，这会在下一次使用popover('toggle')时引发问题。
以下是我刚刚在我的项目中使用的，希望能帮到你
<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">×</button>'); $(this).popover(); }); $(document).click(function(e) { if(e.target.id=="popovercloseid" ) { $('#manualinputlabel').popover('hide'); } });
我已经检查了许多上面提到的代码示例，对于我来说，Chris的方法是完美的。 我已经在这里添加了我的代码来进行工作演示。
我已经用Bootstrap 3.3.1testing过了，我还没有用老版本testing过。 但是它绝对不能用于2.x，因为在shown.bs.popover中引入了shown.bs.popover事件。
$(function() { var createPopover = function (item, title) { var $pop = $(item); $pop.popover({ placement: 'right', title: ( title || ' ' ) + ' <a class="close" href="#">×</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>
诀窍是使用.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'); }); });
这与多个popovers一起工作，我还添加了一些额外的JS来处理重叠popovers发生的Z索引问题：
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">×</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; }
以前的例子有两个主要的缺点：
- “closures”button需要以某种方式来知道引用元素的ID。
- 需要在“shown.bs.popover”事件上添加“closures”button的“点击”侦听器; 这也不是一个好的解决scheme，因为每次显示“popup窗口”时，您都会添加这样的侦听器。
下面是一个没有这种缺点的解决scheme。
默认情况下，'popover'元素被插入到DOM中被引用的元素之后（然后注意引用元素和popover是直接的兄弟元素）。 因此，单击“closures”button时，只需查找最接近的“div.popover”父级，然后查找该父级的紧邻前一个兄弟元素。
只需在“closures”button的“onclick”处理程序中添加以下代码：
$(this).closest('div.popover').popover('hide');
例：
var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').popover(\'hide\');" type="button" class="close" aria-hidden="true">×</button>'; $loginForm.popover({ placement: 'auto left', trigger: 'manual', html: true, title: 'Alert' + genericCloseBtnHtml, content: 'invalid email and/or password' });
只是想更新答案。 按照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">×</button>'; }, content: 'Popup content', trigger: 'hover', html: true }); $('.popover button.close').click(function() { $(this).popover('toggle'); });
尝试这个：
$(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">×</span></button>') .click(function(){ popover.hide(); }); $('.popover-title', $tip).append(close); }); });
而不是将button添加为标记string，如果您有一个jQuery包装button，则更容易，因为这样可以更加整洁地绑定。 Bootstrap代码确实遗漏了这个问题，但是这个解决方法对我来说很实用，而且如果需要的话，实际上可以扩展到适用于所有popup窗口。
我与这一个斗争，这是最简单的方法，3行js：
- 在popover的标题中添加一个十字
- 使用js片段来显示popup窗口，并通过单击页眉closures
- 使用一点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 "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="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>
$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')'
$(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title!!</strong></span> <button type="button" id="close" class="close">×</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>
$('.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" ">×</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"); }); }); });
当你点击元素并显示你的popup窗口，接下来你可以引发事件shown.bs.popover在这里你得到元素在哪个触发器点击closures你的popover。
FWIW，这是我使用的通用解决scheme。 我正在使用Bootstrap 3，但我认为一般的方法也应该与Bootstrap 2一起工作。
该解决scheme启用popup式菜单，并使用JS代码的通用块为“rel =”popover“”标签标识的所有popover添加“close”button。 除了（标准）要求有一个rel =“popover”标签，你可以在页面上放置任意数量的popup，而且你不需要知道他们的ID – 实际上他们不需要ID在所有。 您需要使用“数据标题”HTML标记格式来设置popup窗口的标题属性，并将data-html设置为“true”。
我发现必须的技巧是build立一个对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\')">×</button>'); po.popover({}); }); } $(document).ready(function() { enablePopovers() });
这个解决scheme让我可以轻松地在我的网站上的所有popovers上放一个closuresbutton。
我发现下面的代码非常有用（取自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">×</span>'; } }).on('shown.bs.popover', function(e){ var popover = $(this); $(this).parent().find('div.popover .close').on('click', function(e){ popover.popover('hide'); }); });
粘滞hover，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'); } ); } });
把它放在你的标题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'
…在右上angular有一个小红色的“x”button
//$('[data-toggle=popover]').popover({title:that string here})
对于仍然有点困惑的人来说：
这里是它是如何工作来切换popup窗口显示后，select相同的button，你用它来触发，并调用.popover（“切换”）上。
在这种情况下，closurespopover代码将是：
$（ '＃例子'）酥料饼（ '切换'）;
<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">×</button></span>', content : 'test' }) $("#close").click(function(event) { $("#example").popover('hide'); }); }); </script> <button type="button" id="example" class="btn btn-primary" >click</button>
