时间戳

首页 > 解决方案 > 从外部页面打开引导模式（在它所在的页面上）

javascript - 从外部页面打开引导模式（在它所在的页面上）

问题描述

关于从当前页面上的另一个页面加载模式，或在页面加载时在当前页面上打开模式有很多问题。

我想做的（我承认它有点不正统的 UI）是单击 /home 上的图像热点（团队照片中的个人），这将打开 /team#modal1。简单地使用链接定位模式不会导致它打开。

我可以在 /home 上复制模态内容，但这可能会让用户更加困惑，因为 /team 页面已经包含每个成员的所有这些头像和模态细节。如果有人有兴趣了解有关团队成员的更多信息，他们将在正确的页面上发现更多信息，并且内容不会重复。

我在 Bootstrap4 文档中没有找到任何关于此的内容，除了远程路径选项在 v4 中已被弃用：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

需要明确的是，我不想从当前页面的另一个页面打开模式。我想单击打开另一个页面的链接，并在该页面上打开特定模式而无需进一步单击。

有没有办法在 Bootstrap 中本地执行此操作？

标签： javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal

解决方案

如果您使用的是 JQuery 1.9 或更高版本，您可以使用目标选择器来选择模态，然后.modal('show')在您的文档就绪函数中使用来显示模态。所以基本上：

$(document).ready(function() {
     $(":target").modal("show")
});

但是，您应该意识到使用这种方法可能带来的安全隐患（例如 XSS）。例如，看看https://security.stackexchange.com/questions/177261/is-xss-possible-with-jquerylocation-hash

推荐阅读