單擊頁面上的任意位置，彈出窗口應該消失

Question

我有一個圖標，如果您單擊它，會彈出一個彈出窗口，其中包含從Web服務填充的一些數據。但問題是我想要彈出窗口，只要點擊它，就會消失，只要點擊頁面上的其他任何地方！

請讓我知道我該怎麼做？ 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, 
       }) 
      }); 
});