Javascript 如何让对话框在jQuery中弹出？

我试图让一个对话框弹出时，一个按钮被点击，但什么都没有发生。以下是html：

<button id = "AddSymbol" class="btn" data-toggle="modal" data-target="#exampleModal">
   <i class="glyphicon glyphicon-plus-sign"></i> Syms
</button>

以下是紧跟在上面后面的库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>

我在head部分也有这个版本的jQuery：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>

如果我将其移动到其他两个对象的正上方（如说明所述），则需要不同版本的其他js对象会出现错误。以下是标题部分的链接供参考。这是显示页面时唯一没有错误的顺序：

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Gridsplit Main Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="C:\Users\Greg\Projects\JsonImporter\moneymachine\src\css\jquery.gridsplit.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="./dist/jquery.gridsplit.optimised.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<link href="C:/Users/Greg/Projects/nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="C:/Users/Greg/Projects/nvd3/build/nv.d3.js"></script>
<link rel="stylesheet" type="text/css" href="C:\Users\Greg\Projects\JsonImporter\colResizable-1.6\samples\colResizable.Demo\css\main.css" />  

Gridsplit主要示例

这是一张显示部分页面的图片。还有两个其他组件-一个用于创建可调整的布局分隔符，另一个用于创建具有可调整列宽的表。它们都可以使用同一版本的jquery，这不适用于弹出窗口

我将遵循“可变模态内容”一节中的步骤

我认为问题在于jQuery的其他版本正在覆盖弹出窗口需要的版本，但我只是猜测。希望你们中的一位专家能指出我的错误

---

你们如何处理一个网页上有多个组件依赖于jQuery的特定版本而相互干扰的情况？

使用Bootstrap，这件事非常简单

---

检查上面的链接，您肯定可以从那里获得解决方案

使用引导功能，这件事非常简单

---

检查上面的链接，如果在显示模式时您没有执行任何功能，只需单击按钮即可显示模式，那么您肯定可以从那里获得解决方案

<button data-toggle="modal" data-target="#exampleModal">

---

如果显示模式时没有任何功能，只需单击按钮即可显示模式

<button data-toggle="modal" data-target="#exampleModal">

我希望它能帮助你：

$（'AddSymbol'）。在（'click'，函数（e）上{
$（'#myModal'）.modal（'show'））
})

引导示例
模态示例
开放模态
模态标题
&时代；
情态体。。
接近

我希望它能帮助您：

$（'AddSymbol'）。在（'click'，函数（e）上{
$（'#myModal'）.modal（'show'））
})

引导示例
模态示例
开放模态
模态标题
&时代；
情态体。。
接近

此处的class属性或代码中是否缺少btn引号？btn和数据目标上是否缺少引号。使用类似这样的符号以适当的方式向您展示完整的代码，我也想知道这一点。粘贴后我一定把它搞砸了。谢谢你指出这一点。不幸的是，修复它并没有改变任何事情。仍然没有弹出窗口。是否在类属性中或代码中缺少btn引号？btn和数据目标上缺少引号。使用类似这样的符号以适当的方式向您展示完整的代码，我也想知道这一点。粘贴后我一定把它搞砸了。谢谢你指出这一点。不幸的是，修复它并没有改变任何事情。仍然没有弹出窗口。感谢您提供的简单示例。我可以让它们工作。当我尝试将它与我的其他组件组合时，问题就出现了。我在帖子中添加了部分页面的图片，以向您展示我的意思。感谢您提供了简单的示例。我可以让它们工作。当我尝试将它与我的其他组件组合时，问题就出现了。我在帖子中添加了一部分页面的图片，以向您展示我的意思。是的，也许我需要使用好的'ol html来避免jquery冲突。我将对此进行研究。我使用javascript实现了它，但我必须使用不同的模式对话框，而不是bootstrap中的对话框。是的，也许我需要使用好的OLHTML来避免jquery冲突。我将对此进行研究。我让它与javascript一起工作，但我必须使用不同的模式对话框，而不是来自引导的对话框。是的，这就是我从中获取示例的地方。在“可变模态内容”部分。当我尝试将它与其他组件的代码组合时，就会出现问题。某种jquery冲突，我想。是的，这就是我举这个例子的地方。在“可变模态内容”部分。当我尝试将它与其他组件的代码组合时，就会出现问题。我认为是某种jquery冲突。

<button data-toggle="modal" data-target="#exampleModal">

$('#AddSymbol').on('click', function(e){
    $('#exampleModal').modal('show')
})