【发布时间】：2019-11-25 18:18:04
【问题描述】：
我试图在单击按钮时显示引导模式。该页面使用 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 的按钮是我正在尝试使用的按钮。
【问题讨论】：
-
当它被配置为在页面中打开而不是通过
iframe时，您是否有任何控制台错误？ （按 F12 查看这些） -
@EGC 不，我没有收到任何错误。另外值得注意的是，这是在 Electron 应用程序中，但这似乎与此问题无关。
-
您是否尝试强制模态框的
z-index位于所有其他元素的前面？ -
@EGC 是的，这是我尝试的第一件事。运气不好
-
@EGC 感谢您的帮助...结果出于某种原因使用
window.$ = window.jQuery = require("jquery");形式导入 jQuery 而不是使用来自 cloudflare 的源脚本已解决了该问题。
标签： javascript html bootstrap-4 bootstrap-modal