自动隐藏引导弹出框[关闭]
Posted
技术标签:
【中文标题】自动隐藏引导弹出框[关闭]【英文标题】:Auto hide bootstrap popover [closed] 【发布时间】:2013-01-09 19:24:22 【问题描述】:我想在几秒钟后自动隐藏 Bootstrap 弹出框。 当用户将鼠标悬停在控件上时,必须显示弹出框,但如果用户不移动鼠标指针,则该弹出框必须在几秒钟后自动隐藏。
这很重要,因为在手机或平板电脑中,当用户点击某个控件时,会显示弹出框,并且在用户键入内容时焦点保持在同一个控件上,而弹出框会阻碍它。
【问题讨论】:
【参考方案1】:注意:此解决方案是为 Bootstrap 3 编写的。
这可行,但可能有更有效的方法:
$('.pop').popover().click(function ()
setTimeout(function ()
$('.pop').popover('hide');
, 2000);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="pop" data-original-title="My popover" data-content="Isn't it great?">Click me</span>
http://jsfiddle.net/isherwood/Bqq7C/27/
【讨论】:
我不认为,当同一页面上有多个弹出框元素时,这将完美地工作。问题是当第一个弹出窗口打开时,因为在代码中它将隐藏其他弹出窗口。但是当一个打开并且您打开第二个时,第一个超时将执行并且它将在打开后立即关闭第二个,因为代码是在 2 秒后隐藏所有弹出窗口。我遇到了这种情况。 @sforsandeep 你只需要添加一个中间变量指向你原来的jQuery对象jsfiddle.net/franverona/zPdX9 这似乎不太好用,有几个原因。 1)这不是悬停。 2)当它消失时,您必须单击一次以将其重置,然后再单击一次以激活它。 3)当光标在弹出显示中移动时,它不会保持向上。 认为这个答案被接受它错过了一个关键信息!您必须在初始化弹出窗口时添加触发选项 .. trigger:"manual" .. 否则引导程序会附加一个 onclick 事件,该事件会导致首次使用后需要两次单击的问题.. 以下应该是建议的解决方案.. ..` $("#element").popover(trigger:"manual").click(function() var pop = $(this); pop.popover("show") pop.on('shown .bs.popover',function() setTimeout(function()pop.popover("hide"),2200); ) )` @limplash,也许这与 Bootstrap 2 或 3 无关。您指的是 Bootstrap 4 吗?【参考方案2】:接受的答案工作得很好,但这里有一个更引导的方法:
原答案
$('.pop').on('shown.bs.popover', function ()
var $pop = $(this);
setTimeout(function ()
$pop.popover('hide');
, 2000);
);
从 limlash 更新
这个答案漏掉了一个关键信息!!您必须在初始化 popover 时添加触发选项 .. trigger:"manual" .. 否则引导程序会附加一个 onclick 事件,导致首次使用后需要两次单击的问题.. 以下应该是建议的解决方案
$("#element").popover( trigger:"manual" ).click(function()
var pop = $(this);
pop.popover("show")
pop.on('shown.bs.popover',function()
setTimeout(function()
pop.popover("hide"), 2200);
)
)
【讨论】:
这很好,但是在弹出框自动关闭后,需要单击两次才能再次打开。我认为弹出框仍然认为它是打开的,有什么解决办法吗? @NateBunney,是的,我也注意到了。解决方案是销毁弹出框并重新初始化。我会尝试更新我的答案。 这个答案漏掉了一个关键信息!!您必须在初始化弹出窗口时添加触发选项 .. trigger:"manual" .. 否则引导程序会附加一个 onclick 事件,该事件会导致首次使用后需要两次单击的问题.. 以下应该是建议的解决方案.. ..$("#element").popover(trigger:"manual").click(function() var pop = $(this); pop.popover("show") pop.on('shown.bs.popover',function() setTimeout(function()pop.popover("hide"),2200); ) )
limplash 的解决方案很有魅力。非常感谢!【参考方案3】:
您也可以像这样将自己的新数据属性添加到弹出框:
$('[data-toggle="popover"][data-timeout]').on('shown.bs.popover', function()
this_popover = $(this);
setTimeout(function ()
this_popover.popover('hide');
, $(this).data("timeout"));
);
现在你可以使用
<span
data-toggle="popover"
data-timeout="2000"
title="A title"
data-content="Some explanatory text">
Your text
</span>
并且弹出框在显示您在 data-timeout 中指定的毫秒数后消失。
【讨论】:
不要忘记“on”最好让过滤器支持更改 UI - 我的 2 美分 $(document).on('shown.bs.popover', '[data-toggle ="popover"][data-timeout]', function() this_popover = $(this); setTimeout(function () this_popover.popover('hide'); , $(this).data("timeout" )); );以上是关于自动隐藏引导弹出框[关闭]的主要内容,如果未能解决你的问题,请参考以下文章
单击外部时隐藏Angular UI Bootstrap弹出窗口