6

jQueryでわかるように、私はこの質問の回答を使用して、外側のクリックでBootstrapPopoverが消えるようにしました。今、私は右上隅に「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
    }
});
4

2 に答える 2

16

これが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();
                });
于 2013-03-25T03:12:12.887 に答える
1

私はこの質問がすでに答えられていることを知っていますが、あなたの投稿は私を半ば助けてくれました。このタスクを実行するためのより簡単な方法に出くわした場合、クラス'.pop'のすべてのポップオーバーがあるとすると、これですべての問題が解決するはずです。

$('.pop').on({
  click:function(){
    $('.pop').not(this).popover('hide');
  }
});
于 2015-04-14T04:11:31.697 に答える