我们能否以与模态相同的方式使弹出窗口被解雇,即.当用户点击它们之外的某个地方时,让它们关闭？
不幸的是我不能只使用真正的模态而不是弹出模式,因为模态意味着位置:固定并且不再是弹出模式.:(
我希望有人能帮帮忙.
当我点击另一个工具提示图标时,我正试图隐藏工具提示.它有效,但当我决定再次点击最后一个工具提示时,它会"闪烁"工具提示.
var Hastooltip = $('.hastooltip');
HasTooltip.on('click', function(e) {
e.preventDefault();
HasTooltip.tooltip('hide');
}).tooltip({
animation: true
}).parent().delegate('.close', 'click', function() {
HasTooltip.tooltip('hide');
});
HTML
<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
<h3>Info 1</h3>
</a>
<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
<h3>Info 2</h3>
</a>
如果有助于在用户单击按钮以显示工具提示时将以下标记添加到DOM.
<div class="tooltip"</div>
我有表行,我在twitter bootstrap popover中显示其他信息.
我使用的交互设计中的一些注释:
现在,链接部分是困难的部分.如果将鼠标从表格行移动到弹出框(包含链接),则弹出窗口将消失!
我用这段代码创建了popover:
var options = {placement: 'bottom', trigger: 'hover', html: true};
$(this).popover()
- 假设生成包含链接的相关html并将其放入data-content属性中
注意这个{placement: 'bottom' }.为了能够将鼠标移动到弹出窗口,我尝试了{placement: 'in bottom'}(添加了in关键字,它在选择器内生成popover dom元素).
问题是表行,这在HTML方面并不合法.也许这就是为什么placement: 'in bottom'呈现更丑陋的原因:popover粘在我的视口顶部.
在JSFiddle的My example中尝试我的演示
它包含了例子......
我的问题是我应该如何定义我的popover,以便可以点击链接 - 考虑到交互设计设置的限制？
正如你在jQuery中看到的那样,我已经使用了这个问题的答案来使一个Bootstrap Popover在外部点击时消失.现在我想在右上角添加一个"x",在点击时关闭弹出窗口.
有没有一种简单的方法可以在弹出窗口的右上角创建一个可点击的"x",当点击它时会关闭弹出窗口？
HTML:
<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
jQuery的:
var isVisible = false;
var clickedAway = false;
$('.btn-danger').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('show');
clickedAway = false
isVisible = true
e.preventDefault()
});
$(document).click(function(e) {
if (isVisible & clickedAway) {
$('.btn-danger').popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
} …我希望Twitter Bootstrap popover 仅在用户点击popover外部时关闭.我不希望弹出窗口内的点击关闭弹出窗口.我已经搜索过,这个答案就是为了点击popover内部关闭popover.如果可能的话,也请不要宝石建议,因为我正在寻找代码解决方案.谢谢!
HTML:
<a id="test-button" href="#" class="btn">Popover</a>
使用Javascript/jQuery的:
$('#test-button').popover({content:"stuff", trigger:'click'});
我正在使用bootstrap v2.2.2.我已经尝试了一些其他的方法(即:关闭popover外popover但内部保持打开以及如何通过单击外部解除Twitter Bootstrap popover ？还尝试了Boot strapX clickover插件:https://stackoverflow.com/a/11029479/ 1043817)但我不能通过这些方法使它工作.
我用我在页面上使用代码的方式创建了一个JSFiddle:http://jsfiddle.net/FYNLL/(虽然我使用的是v2.2.2,但JSFiddle使用的是v2.0.2中的JS.我认为这些版本有一些差异.当我在本地使用v2.2.2时,直到我点击链接才会显示popover.在JSFiddle中它会在悬停时显示.要清楚我要在链接后显示它已被点击,而不是悬停)
我想要完成的是在点击弹出窗口外的区域时隐藏弹出窗口.如果单击另一个弹出链接,我希望关闭第一个弹出窗口并单击要打开的弹出窗口.
这也不是绝对必要的,但是popover当它在.js文件中时我无法工作(我已经尝试过使用.each()).我真的想摆脱<script> $(function () { $("a[rel=popover]").popover(); });</script>我的HTML文件.同样,这不是一个优先事项.