草庐IT

javascript - 表行悬停的 Bootstrap 弹出窗口 : Not possible to click link inside popover

coder 2024-07-15 原文

我有表格行，我在 Twitter Bootstrap 弹出窗口中显示其他信息。

我参与交互设计时的一些注意事项:

  • 悬停行时必须显示弹出窗口
  • 弹出窗口将包含 1 个或多个链接

现在，链接部分是最难的部分。如果将鼠标从表格行移到弹出窗口(包含链接)，弹出窗口将消失!

我正在用这段代码创建弹出窗口:

var options = {placement: 'bottom', trigger: 'hover', html: true};
$(this).popover()

-- 假定包含链接的相关 html 已生成并放入 data-content 属性

注意这个 {placement: 'bottom' } 。为了能够将鼠标移动到弹出窗口，我尝试了 {placement: 'in bottom'} (添加了 in 关键字，它在选择器内生成弹出 dom 元素)。

问题出在表格行上，这在 HTML 方面并不是真正合法的。也许这就是为什么 placement: 'in bottom' 呈现得更加丑陋:弹出窗口粘在我的视口(viewport)顶部。

在 My example on JSFiddle 中尝试我的演示

它包含示例......

我的问题是我应该如何定义我的弹出窗口，以便可以单击链接 - 考虑到交互设计设置的限制？

最佳答案

问题很明显，弹出窗口做了它应该做的事情。当您将弹出窗口附加到 <tr> 时的，并让弹出窗口响应悬停 - 并且弹出窗口卡在 <tr> 下方。的底部 - 你永远无法到达弹出窗口的内容。

Trigger:hover 可以很容易地被 trigger:manual 像这样模仿

$('table').on('mouseenter', 'tr', function() {
    $(this).popover('show');
});
$('table').on('mouseleave', 'tr', function() {
    $(this).popover('hide');    
});

设置 trigger:manual 使我们能够操纵弹出行为。下面的解决方案增加了一点延迟 mouseenter/mouseleave -events，然后检查鼠标是否在弹出框内(通过将事件附加到弹出框本身)。如果鼠标在弹出框内，则不会显示新的弹出框，并且不会隐藏事件的弹出框，即使有 mouseenter 也是如此。 -另一个事件<tr> . fork 的 jsfiddle:http://jsfiddle.net/xZxkq/ 

var insidePopover=false;

function attachEvents(tr) {
    $('.popover').on('mouseenter', function() {
        insidePopover=true;
    });
    $('.popover').on('mouseleave', function() {
        insidePopover=false;
        $(tr).popover('hide');
    });
}

$('table').on('mouseenter', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) {
            $(tr).popover('show');
            attachEvents(tr);
        }
    }, 200);
});

$('table').on('mouseleave', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) $(tr).popover('hide');  
    }, 200);
});

关于javascript - 表行悬停的 Bootstrap 弹出窗口 : Not possible to click link inside popover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16598135/

javascriptBootstrapcode39functiontwitter-bootstrappopover

有关javascript - 表行悬停的 Bootstrap 弹出窗口 : Not possible to click link inside popover的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  3. ruby - (Ruby || Python) 窗口管理器 - 2

    我想用这两种语言中的任何一种(最好是ruby​​)制作一个窗口管理器。老实说，除了我需要加载某种X模块外，我不知道从哪里开始。因此，如果有人有线索，如果您能指出正确的方向，那就太好了。谢谢 最佳答案 XCB，X的下一代API使用XML格式定义X协议(protocol)，并使用脚本生成特定语言绑定(bind)。它在概念上与SWIG类似，只是它描述的不是CAPI，而是X协议(protocol)。目前，C和Python存在绑定(bind)。理论上，Ruby端口只是编写一个从XML协议(protocol)定义语言到Ruby的翻译器的问题。生

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

随机推荐