如何使彈出功能關閉在這個功能？

Question

我想通過單擊外部（或點擊屏幕）來關閉彈出窗口。我在這種情況下做錯了什麼？

HTML

<div class="container"> 
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover Example</a> 
    <div> 
    <button type="button" class="btn btn-warning">Hide</button> 
    </div> 
</div> 

JS

$(document).ready(function(){ 
$("[data-toggle='popover']").click(function(){ 
    $("[data-toggle='popover']").popover('show'); 
}); 
$(body).click(function(){ 
    $("[data-toggle='popover']").popover('hide'); 
}); 

}); 

小提琴 https://jsfiddle.net/1rbddcap/1/

Answer 1

你必須在你的代碼的兩個問題：

1）$(body)應該是$('body')。標記名選擇器需要用引號括起來。

2）停止父體事件傳播到popover點擊使顯示功能工作。

$("[data-toggle='popover']").click(function(e){ 
e.stopPropagation() 
    $("[data-toggle='popover']").popover('show'); 
}); 
$('body').click(function(){ 
    $("[data-toggle='popover']").popover('hide'); 
}); 

Working Demo

Answer 2

嘗試與此下面的代碼可以幫助你解決這個問題

$(document).ready(function(){ 
 
    $("[data-toggle='popover']").click(function(){ 
 
     $("[data-toggle='popover']").popover('show'); 
 
     return false; 
 
    }); 
 
    $('body').click(function(){ 
 
     $("[data-toggle='popover']").popover('hide'); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover Example</a> 
 
    <div> 
 
    <button type="button" class="btn btn-warning">Hide</button> 
 
    </div> 
 
</div>