Javascript 链接上的数据切换未打开模式

在过去的几天里，我一直在为工作中的一个项目使用Modals。触发器是一个链接（带有一个glyphicon以让用户知道它是一个表），我试图使用链接上的数据切换打开一个包含表的模式。我不明白为什么它不起作用

触发因素：

模式：

&时代；
表A
表代码位于此处（使用其他方法时，表确实正确显示）
印刷品
接近

（是的，我的主管希望模式可以打印（我知道这将是另一个让人头疼的问题），但现在我只想让该死的模式打开。我想我在页脚按钮上缺少CSS，但这不应该阻止模式打开，对吗？）

CSS：

.modal{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#333；
保证金：自动；
填充：0；
边框：1px实心#EEE；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}
/*模态头*/
.模态标题{
填充：2x16px；
背景色：#EEE；
颜色：白色；
}
/*关闭按钮*/
.结束{
颜色：#aaa；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：黑色；
文字装饰：无；
光标：指针；
}
/*模态体*/
.模态体{填充：2px 16px；}
/*模态页脚*/
.模态页脚{
填充：2x16px；
背景色：#EEE；
颜色：白色；
}
/*页脚打印按钮*/
.打印btn{
颜色：#aaa；
/*浮动：对*/
显示：内联块；
字号：28px；
字体大小：粗体；
}
.打印btn：悬停，
.打印btn：焦点{
颜色：黑色；
文字装饰：无；
光标：指针；
}
/*页脚关闭按钮*/
.关闭btn{
颜色：#aaa；
/*浮动：对*/
显示：内联；
字号：28px；
字体大小：粗体；
}
.关闭btn：悬停，
.关闭btn：焦点{
颜色：黑色；
文字装饰：无；
光标：指针；
}

---

我做错了什么？

如果不查看你的JS代码，我真的没什么好抱怨的。但是，如果您只想显示模态，那么应该为span指定一个id属性或其他标识。我将您的文本“Table A”移动到

span

标记的内部，而不是外部，并给它一个id属性。然后我添加了JavaScript，在单击文本时打开模式。这只是使模态仅显示的一种方法

JSfiddle：

另一种方法是，您需要包含正确的

脚本
标记，以便您的模态能够正常工作：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>




希望这能帮助您走上正确的轨道
您的错误似乎是代码中没有包含引导。如果确实包含它，它似乎工作正常：


要包含它，请根据引导文档将其添加到HTML中：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



我认为您犯的错误是假设
数据切换作为属性实际上有一个函数。但事实并非如此，因为据我所知，数据切换不是HTML5的一部分，而是通过引导添加的。如果没有安装引导程序，
data toggle=“modal”
只是一个键值对，其中
data toggle
是键，
modal
是值

如果您对JSFIDLE不太熟悉，引导程序及其依赖项将导入页面左侧的
参考资料
选项卡中。
将其用作标记，并将所有css包含在页眉中，而js包含在页脚中，它可以工作

<a href="#yourmodal" data-target="#yourmodal" data-toggle="modal"></a>