Bootstrap：popover按鈕點擊

我已經使用bootstrap popover功能，現在它的工作..但我需要「關閉」彈出框，如果我點擊頁面中的任何地方。請檢查我使用的代碼。Bootstrap：popover按鈕點擊

首先點擊按鈕，然後我需要點擊黑色空間（現在只有當我們點擊同一個按鈕時才關閉）彈出框。

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
 
    <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger">Click here</a> 
 
    <br> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-11-07 Vishnu

看這裏 - http://stackoverflow.com/questions/11703093 /如何對解僱-A-TWIT ter-bootstrap-popover-by-outside – TT8

http://stackoverflow.com/questions/8947749/how-can-i-close-a-twitter-bootstrap-popover-with-a-click-from-anywhere-其他 - 在 – prasanth

這將在下面工作的JavaScript

使用解僱酥料餅當外界點擊

$('body').on('click', function (e) { 
    $('[data-toggle="popover"]').each(function() { 
     //the 'is' for buttons that trigger popups 
     //the 'has' for icons within a button that triggers a popup 
     if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 
      $(this).popover('hide'); 
     } 
    }); 
});

來源

2016-11-07 10:14:11

非常感謝......它的工作:) – Vishnu

在a標籤只需使用data-trigger="focus"

欲瞭解更多信息檢查Dismissible popover

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
 
    <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger" data-trigger="focus">Click here</a> 
 
    <br> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-11-07 10:15:45

試試這個

$(document).ready(function(){ 
$('[data-toggle="popover"]').popover({trigger:'focus'}); 
});

$(document).ready(function(){ 
 
$('[data-toggle="popover"]').popover({trigger:'focus'}); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 

 

 
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
 
    <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger">Click here</a><br> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-11-07 10:17:41

Bootstrap：popover按鈕點擊

回答

相關問題