Question

我有一个Icon，如果你点击它就会出现一个popover，其中包含一些从webservice填充的数据。但问题是我希望每当我点击它时弹出窗口就会出现，只要我点击页面上的任何其他地方，就会消失！

你能告诉我怎么做吗？

PS：我已经尝试过触发器：'手动'，但它对我的例子不起作用！

我的代码在这里：

$('#myIcon').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
                type: "POST",
                url: "myURL"
            }).done(function (data) {                                           
                $this.popover({
                    placement:'bottom',                                        
                    content: function () {
                        html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>";
                        for (var i = 0; i < data.length; i++) {
                            html = html + "<tr><td>" + data[i]['username'] + "</td></tr>";
                        }
                        html = html + "</tbody></html>";
                        return html;
                    },
                    html: true,
                })
            });
});

Answer 1

你可以试试这是否适合你。

当您显示弹出窗口时，向隐藏弹出框的整个主体添加一次性单击侦听器。

$('#myIcon').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
                type: "POST",
                url: "myURL"
            }).done(function (data) {                                           
                $this.popover({
                    placement:'bottom',                                        
                    content: function () {
                        html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>";
                        for (var i = 0; i < data.length; i++) {
                            html = html + "<tr><td>" + data[i]['username'] + "</td></tr>";
                        }
                        html = html + "</tbody></html>";
                        return html;
                    },
                    html: true,
                });
                $('body').one('click',function(ev){
                    ev.preventDefault();
                    $this.popover('hide');
                });
            });
});

Answer 2

popover有一个名为hideOnHTMLClick的方法，其中显示Hide popovers when clicked outside of them.

$('#myIcon').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
                type: "POST",
                url: "myURL"
            }).done(function (data) {                                           
                $this.popover({
                    placement:'bottom',
                    hideOnHTMLClick: true,                                        
                    content: function () {
                        html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>";
                        for (var i = 0; i < data.length; i++) {
                            html = html + "<tr><td>" + data[i]['username'] + "</td></tr>";
                        }
                        html = html + "</tbody></html>";
                        return html;
                    },
                    html: true,
                })
            });
});

单击页面上的任意位置，弹出窗口将消失

2 个答案: