- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用了 bootstrap popover 和一些定制的 jquery。弹出窗口功能工作正常,但如果我添加了带有外部链接的按钮,则它不起作用。请参阅代码:有两个按钮“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>
最佳答案
您在第二个按钮中缺少一些data-toggle
、data-placement
语法!添加这些将使第二个按钮具有与第一个按钮相同的功能。我已将其添加到您的代码中:
<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>
关于javascript - Bootstrap : popover button link not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40650937/
我遇到过这个 html: 上面的html和这个有什么区别: 最佳答案 来自MDN page on the tag : 对于 type 的属性标签,可能的值是: 提交:按钮将表单数据提交给服务器
Button button= (Button) findViewbyID(R.id.button); 和 Button button = new Button(this); 有什么区别? 最佳答案 有
我是一名优秀的程序员,十分优秀!