jsFiddle:
http://jsfiddle.net/kAYyR/
截图:@H_403_3@
@H_403_3@
这是有用的:@H_403_3@
>点击按钮打开popover
>点击pop pop外的关闭popover
>点击.close按钮关闭popover@H_403_3@
但是,当您再次单击原始按钮时,我无法关闭弹出窗口.相反,popover会再次闪烁.@H_403_3@
我该如何做到这一点?@H_403_3@
HTML:@H_403_3@
<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button> <div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>
JS:@H_403_3@
$('#popoverId').popover({ html: true,title: "Popover Title",content: function () { return $('#popoverContent').html(); } }); var isVisible = false; var clickedAway = false; $('.popoverThis').popover({ html: true,trigger: 'manual' }).click(function (e) { $(this).popover('show'); $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">×</a>'); clickedAway = false isVisible = true e.preventDefault() }); $(document).click(function (e) { if (isVisible & clickedAway) { $('.popoverThis').popover('hide') isVisible = clickedAway = false } else { clickedAway = true } });
解决方法
你想要这样的工作吗?
http://jsfiddle.net/kAYyR/3/@H_403_3@
$('#popoverId').popover({ html: true,title: 'Popover Title<a class="close" href="#");">×</a>',content: $('#popoverContent').html(),}); $('#popoverId').click(function (e) { e.stopPropagation(); }); $(document).click(function (e) { if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) { $('#popoverId').popover('hide'); } });