我正在尝试单击按钮时进行引导模态显示。该页面正在使用SVG，因为它需要具有可视路径/节点。单击该按钮时，模态不会显示。但是，在iframe中使用页面时，将显示模式。
这里是该页面的代码：
<html>
<head>
<link rel="stylesheet" href="mb.css" />
<link rel="stylesheet" type="text/css" href="NEditor.css" />
<link
href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet"
/>
<script src="Utilities.js"></script>
<script src="NodeClasses.js"></script>
<script src="NodeMethods.js"></script>
<style>
body {
font-family: "Lato";
}
</style>
</head>
<body>
<div
class="btn-group"
role="group"
aria-label="Basic example"
style="padding-top: 10px; padding-left: 5px;"
>
<button
class="btn btn-primary"
id="CommandBtn"
style="background-color: #6c757d;"
data-toggle="modal"
data-target="#addCommand"
>
Add Command
</button>
<button
class="btn btn-primary"
id="ResponseBtn"
style="background-color: #6c757d;"
>
Add Response
</button>
<button
class="btn btn-primary"
id="SaveBtn"
style="background-color: #6c757d;"
>
Save Flow
</button>
</div>
<div class="container-fluid" style="padding: 15px;">
<svg id="connsvg"></svg>
</div>
<div class="modal fade" id="addCommand">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New Command</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
×
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputPassword1"
>Command name</label
>
<input class="form-control" id="commandName" />
</div>
</div>
<div class="modal-footer">
<a
href="#"
data-dismiss="modal"
class="btn btn-secondary"
>Close</a
>
<a
class="btn btn-primary"
style="color: white;"
id="addCommandBtn"
data-dismiss="modal"
>Add</a
>
</div>
</div>
</div>
</div>
<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>
</body>
<script>
window.addEventListener("load", function(e) {
loadNodesFromFile();
loadNode();
/* var n4 = new NEditor.Node("Compile Results");
var n4i1 = n4.addInput("Input A");
var n4i2 = n4.addInput("Input B");
n4.setPosition(700, 180);
var n3 = new NEditor.Node("Some Process");
var n3i1 = n3.addInput("Input");
var n3o1 = n3.addOutput("Output");
n3.setPosition(300, 50);
n3.setWidth(200);
n3o1.connectTo(n4i2);
var n2 = new NEditor.Node("Some Other Process");
var n2i1 = n2.addInput("Input");
var n2o1 = n2.addOutput("Output");
n2.setPosition(300, 300);
n2.setWidth(200);
n2o1.connectTo(n4i1);
var n1 = new NEditor.Node('"Help" command');
var n1o1 = n1.addOutput("Response");
n1.setPosition(50, 200);
n1o1.connectTo(n2i1);
n1o1.connectTo(n3i1); */
});
document.body.style.width = "2000px";
document.body.style.height = "1000px";
// #####################
// SETUP UI
// #####################
//var commandButton = document.getElementById("CommandBtn");
var saveButton = document.getElementById("SaveBtn");
// Create new command node
//commandButton.addEventListener("click", function() {});
// Save the current flow state
saveButton.addEventListener("click", function() {
saveFlowState();
location.href = "./index.html";
});
</script>
ID为CommandBtn的按钮是我尝试使用的按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>