[英]Bootstrap: popover button link not working
I have used bootstrap popover with some customized jquery. 我已将Bootstrap Popover与一些自定义的jquery一起使用。 Popover function is working fine but if i have add a button with an external link, its not working.
弹出功能正常运行,但是如果我添加了带有外部链接的按钮,则无法正常工作。 See the code: there is two buttons "Button1" for popover & "Button2" for external link.
参见代码: 有两个按钮“ Button1”用于弹出按钮,“ Button2”用于外部链接。
$(document).ready(function () { $("body").tooltip({ selector: "[data-toggle='tooltip']", container: "body" }) .popover({ selector: "[data-toggle='popover']", container: "body", html: true }); }); $('body').on('click', function (e) { $('[data-toggle="popover"]').each(function () { if(!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('hide'); } }); });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title=""> Button1 </a> <a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a> </div>
You're missing some data-toggle
, data-placement
syntax's in the second button! 第二个按钮中缺少一些
data-toggle
和data-placement
语法! Adding these will give the second button the same function as the first button. 添加这些将使第二个按钮具有与第一个按钮相同的功能。 I have added this to your code:
我已将此添加到您的代码中:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"> $(document).ready(function () {
$("body").tooltip({
selector: "[data-toggle='tooltip']",
container: "body"
})
.popover({
selector: "[data-toggle='popover']",
container: "body",
html: true
});
});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if(!$(this).is(e.target) &&
$(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});</script>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
<a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
Button1
</a>
<a class="btn btn-danger" href="http://facebook.com" data-placement="top" data-toggle="popover" data-content="Popover" data-original-title="" title="" target="_blank">Button2</a>
</div>
The stack overflow scripts are blocking your link from opening a new page/redirect. 堆栈溢出脚本阻止您的链接打开新页面/重定向。 Try this codepen with your code : http://codepen.io/TunderScripts/pen/oYYbgW
使用您的代码尝试此Codepen: http ://codepen.io/TunderScripts/pen/oYYbgW
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
<a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
Button1
</a>
<a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a>
</div>
$(document).ready(function () {
$("body").tooltip({
selector: "[data-toggle='tooltip']",
container: "body"
})
.popover({
selector: "[data-toggle='popover']",
container: "body",
html: true
});
});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if(!$(this).is(e.target) &&
$(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.