正如你在
jQuery中看到的那样,我使用了
this question的答案,使一个Bootstrap Popover在外部点击时消失.现在我想在右上角添加一个“x”,在点击时关闭弹出窗口.
有没有一种简单的方法可以在弹出窗口的右上角创建一个可点击的“x”,当点击它时会关闭弹出窗口?
HTML:
<h3>Live demo</h3> <div class="bs-docs-example" style="padding-bottom: 24px;"> <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> </div>
jQuery的:
var isVisible = false; var clickedAway = false; $('.btn-danger').popover({ html: true,trigger: 'manual' }).click(function(e) { $(this).popover('show'); clickedAway = false isVisible = true e.preventDefault() }); $(document).click(function(e) { if (isVisible & clickedAway) { $('.btn-danger').popover('hide') isVisible = clickedAway = false } else { clickedAway = true } });
解决方法
这是jquery代码:
这个只是将X按钮添加到右上角:
var isVisible = false; var clickedAway = false; $('.btn-danger').popover({ html: true,trigger: 'manual' }).click(function(e) { $(this).popover('show'); $('.popover-title').append('<button type="button" class="close">×</button>'); clickedAway = false isVisible = true e.preventDefault() }); $(document).click(function(e) { if(isVisible & clickedAway) { $('.btn-danger').popover('hide') isVisible = clickedAway = false } else { clickedAway = true } });
只有在单击X按钮时,才会关闭弹出窗口:
$('.btn-danger').popover({ html: true,trigger: 'manual' }).click(function(e) { $(this).popover('show'); $('.popover-title').append('<button type="button" class="close">×</button>'); $('.close').click(function(e){ $('.btn-danger').popover('hide'); }); e.preventDefault(); });