问题标签 [bootstrap-tour]

我正在使用 Bootstrap Tour v0.11，但我无法激活导览。我想用一个按钮开始游览，所以我添加了一个点击功能。但是，当我检查控制台时，我的元素上出现了 SyntaxError。

这是我想在巡演中突出显示的按钮和 div：

这是我的选项：

出于某种原因，我的浏览器认为element:"#firstStep",不正确。我直接从 API 文档中复制，所以我不知道我做错了什么。

更新：我可以通过重新输入双引号来修复错误，因为我做了复制/粘贴。我现在收到 jQuery 错误。我的网站目前在 v1.9.1 上运行。Bootstrap Tour 工作的最低要求是多少？我在他们的文档中找不到任何东西。

我有 3 个 div，前两个是可见的，然后第三个是隐藏的，在前 2 个中的每一个中都有一个按钮，当你按下它时隐藏 div，当两者都隐藏时，第三个变得可见。问题是如果 div1 或 div2 可见，我如何“禁用”下一个按钮。

我曾尝试使用 onHide、onShow，但它要么不起作用，要么陷入无限循环。

添加此功能的正确方法是什么。

编辑：HTML

JS

演示

密码笔

在 CODEPEN 中的地图上按全屏图标开始游览

期望的结果

bootstrap tour 元素应该出现在所有内容的顶部，同时突出显示它的目标元素。

我得到了什么

忽略红色按钮与上图的区别，内容无关紧要

问题

当用户切换全屏按钮（使用传单全屏插件）时，它会开始游览。

巡演运行良好，但巡演的元素没有正确响应，我的预感是它正在努力与全屏地图竞争，以吸引前面的注意力。

目前，弹出框没有显示，即使在开发工具中我把它的 z-index 设置得尽可能高。深色叠加层也没有显示在全屏地图的顶部。

最后，目标没有正确突出显示。在浏览其他页面上的目标时，它仍然是原始元素，但在此页面上检查元素时，它不是元素，而是放置在顶部的新引导 div。不知道为什么它不以相同的方式工作。

我试过的

旅游代码

我的理解是，引导程序在选择目标元素时为其分配新类，然后将其设置为z-index: 1101

我一直试图将更高的 z-index 强行强制到 bootstrap tour 元素上，但没有运气 - 无论我将它们设置多高，它们都没有达到最高水平。

我还强制将地图设置为z-index: 100 !important，并且仍然覆盖到顶部 - 尽管在开发工具中仍然显示为z-index: 100 !important 任何想法/建议都会很棒。

下载源代码后，让游览演示工作的必要步骤是什么？我已经尝试了多次，但在使用命令ng serve后它给了我这些错误：

C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/console/console.component.ts (1,29) 中的错误：找不到模块“ngx-tour-console”。

C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/console/console.module.ts (4,35) 中的错误：找不到模块“ngx-tour-console”。

C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.component.ts (1,29) 中的错误：找不到模块“ngx-tour-ng-bootstrap” .

C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts (4,39) 中的错误：找不到模块“ngx-tour-ng-bootstrap” .

错误中的错误遇到静态解析符号值。无法解析相对于 C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts. 的 ngx-tour-ng-bootstrap，解析 C 中的符号 NgBootstrapModule： /Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts，解析符号NgBootstrapModule在C:/Users/jimmy/angularpractice/ngx-tour-master/src/ app/ng-bootstrap/ng-bootstrap.module.ts，在 C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts webpack 中解析符号 NgBootstrapModule：编译失败。

使用 angular 2+ 的 ng2+ tour 演示的源代码在这里：

https://isaacplmann.github.io/ngx-tour/ https://github.com/isaacplmann/ngx-tour

我有一个引导游览，当我点击“跳过”时，我想关闭弹出窗口但不结束游览，当我点击访问按钮时，我想继续关闭前的最后一步，我该怎么做？

按钮：

代码：

谢谢。

我无法翻译我的标题和内容，这是我的 (locales/fr.yml) 代码：

对于我的 js：

我对Bootstrap tour有疑问。

我的问题

当我从一个页面重定向到另一个页面时，该init函数将被调用，但不会自动继续浏览。所以引导程序不会显示。该页面还包含一个 AJAX 框架，其中的内容将在document.ready.

当我稍微滚动页面时，加载 AJAX 框架后，会突然显示游览。

代码

因此，#news_container在我单击调用该函数的按钮后，将直接显示第 1 部分startTour()。然后在第一部分之后，它将被重定向到第二页。现在，只有当我滚动时，才会显示游览。

我能做些什么？我可以创建一个触发器来稍微滚动页面吗？

谢谢你。

我们想在我们的 SPA 上使用引导程序游览脚本 ( http://bootstraptour.com )。

由于我们想要浏览多个页面（这是可能的），我将游览放入 中，rootScope并定义了一些函数来开始游览。我的想法rootScope是始终可以在应用程序中使用，因此始终可以访问游览。

显示了第一步，但是当我想更进一步时，重定向后游览会停止。所以用户在下一页但没有游览......

由于我们在游览中使用角度转换，我们不能将游览放在单独的文件中以加载外部角度。

这是一个旅游的代码，（我们有 4 个不同的旅游）放在rootScope. 为了可读性，我删除了一些步骤。

所以在这段代码中，游览在第 3 步之后停止，但它从第 4 步开始转发到路径

我是打字稿的新手。我有一个使用引导程序的项目。一直以来，我都在使用 bootstrap tour API 中给出的简单实现。当我将此代码移动到 Typescript 时，它在 Tour 类上给了我一个错误。

如何从 Typescript 调用 Tour 对象？

我正在使用http://bootstraptour.com/突出显示我的应用程序的功能。

我想突出显示一个下拉列表，它的内容是导览中的一个步骤。

我有以下代码突出显示下拉按钮并打开下拉列表，但我无法让它突出显示下拉内容

任何想法如何突出显示实际的下拉菜单？。我创建了一个jsfiddle，任何帮助将不胜感激。