如何创建Bootstrap弹出窗口关闭选项

Question

正如您在jQuery 中所见，我使用了这个问题中提供的答案，在外部单击时使Bootstrap Popover消失。现在我想在右上角添加一个“x”，以便在单击时关闭Popover。

是否有一种简单的方法来创建一个可点击的“x”，位于Popover右上角，当单击时关闭Popover？

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

- Raphael Rafatpanah

---

@JorgeCode的代码可以用。我使用第一个，没有在标题行中添加关闭按钮。（由于权限不足，无法对Jorge Code的回答进行评论） - Huang Zhu

Answer 1

这是 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">&times;</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">&times;</button>');
                    $('.close').click(function(e){
                        $('.btn-danger').popover('hide');
                    });
                    e.preventDefault();
                });

- CodeArtist

---

谢谢你！我点了个赞！唯一的问题是，当我把它添加到我的网站上时，点击“x”关闭弹出框也会提交我的表单。有什么想法吗？ - Raphael Rafatpanah

既然你技术上回答了我的问题，我也会给你一张支票！仍在解决表单提交问题。 - Raphael Rafatpanah

嗨，问题不在这段代码中。我相信它在别的地方，除非你把这个按钮变成了提交按钮... - CodeArtist

解决了，是因为使用了'<button class="close">而不是其他类似'<a class="close">的东西。 - Raphael Rafatpanah

好的，我明白了，但<a>不是按钮而是链接。试试这个：<button type="button" class="close">×</button>。也许会将其识别为“提交”按钮，所以如果您指定type="button"，可能会解决您的问题。 - CodeArtist

第二个简单示例做得很好！+1 这正是我要找的答案！ - Phil Nicholas

Answer 2

我知道这个问题已经有答案了，但是你的帖子对我有所帮助。我偶然发现了一个更简单的方法来完成这个任务。假设你有所有弹出框都有类名 '.pop'，这应该解决你所有的问题。

$('.pop').on({
  click:function(){
    $('.pop').not(this).popover('hide');
  }
});

- Youngnate DaGreat